How to hide the scroll bar in css

Method: 1. Use the "overflow-y:scroll" statement; 2. Use the "overflow-x:hidden;overflow-y:auto;" statement; 3. Use "margin-right:-15px; margin-bottom:-15px;" statement.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

Method 1

The code is as follows:

html { overflow-y: scroll; }

Principle: Force the vertical scroll bar of IE to be displayed, while ignoring the horizontal scrolling Article

Advantages: Completely solves this problem, allowing you to maintain the complete XHTML doctype.

Disadvantages: Vertical scroll bars will appear even when the page does not require vertical scroll bars.

Method 2: (recommended)

The code is as follows:

html { overflow-x: hidden; overflow-y: auto; }

Principle: Hide horizontal scrolling, vertical scrolling according to Content adaptive

Advantages: Visually solves this problem. When unnecessary, the vertical scroll bar is not forced to appear

Disadvantages: It just hides the horizontal scroll bar, if the page really needs it When the horizontal scroll bar is used,

the content outside the screen will not be visible because the user cannot scroll horizontally.

Method 3

The code is as follows:

body { margin-right: -15px; margin-bottom: -15px; }

Principle: This will add a margin horizontally and vertically Negative value, after IE adds this precise value, it will remove the illusion of demand for scroll bars

Advantages: This problem is solved visually. Vertical scrolling is adaptive according to the content

Disadvantages : Since the 15px margin is "artificially created", the filled screen area cannot be used

-------------------------- ----------------
Set the style

In the original html, we can define the scroll bar of the entire page like this

The code is as follows:

body{ scrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/ scrollbar-highlight-color:#fff; /*- 左二 -*/ scrollbar-face-color:#E4E4E4; /*- 面子 -*/ scrollbar-arrow-color:#666; /*- 箭头 -*/ scrollbar-shadow-color:#808080; /*- 右二 -*/ scrollbar-darkshadow-color:#D7DCE0; /*- 右一 -*/ scrollbar-base-color:#D7DCE0; /*- 基色 -*/ scrollbar-track-color:#;/*- 滑道 -*/ }

But the same code will not work when we apply it under xhtml. I believe many good friends have encountered the same problem

So How can I apply scroll bar style under xhtml? Look at the following code

The code is as follows:

html{ scrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/ scrollbar-highlight-color:#fff; /*- 左二 -*/ scrollbar-face-color:#E4E4E4; /*- 面子 -*/ scrollbar-arrow-color:#666; /*- 箭头 -*/ scrollbar-shadow-color:#808080; /*- 右二 -*/ scrollbar-darkshadow-color:#D7DCE0; /*- 右一 -*/ scrollbar-base-color:#D7DCE0; /*- 基色 -*/ scrollbar-track-color:#;/*- 滑道 -*/ }

The only difference between this code and the previous paragraph is that in the elements defined by css, one is body and the other is html. Let's test it again and change the

"body" of the html page to "html" to test it and find that the effect can still be achieved. So why?

Literally, xhtml has one more x than html, so this x is actually xml. Why do we need to add xml in it? In fact, the most fundamental reason is to make html more structured and standardized (because html is really bad).

What we define in html is body. Because html is not very standard, this can work, but in xhtml it does not work.

When I look at the picture, it is obvious that the body tag It is not the root element itself, only html is the root element, and the scroll bar of the page also belongs to the root element, so this is why our definition of body has no effect, because what we define is only a sub-element. ok, we know the principle, let's do an experiment. If the definition "body" or "xhtml" is replaced by "*",

The code is as follows:

*{ scrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/ scrollbar-highlight-color:#fff; /*- 左二 -*/ scrollbar-face-color:#E4E4E4; /*- 面子 -*/ scrollbar-arrow-color:#666; /*- 箭头 -*/ scrollbar-shadow-color:#808080; /*- 右二 -*/ scrollbar-darkshadow-color:#D7DCE0; /*- 右一 -*/ scrollbar-base-color:#D7DCE0; /*- 基色 -*/ scrollbar-track-color:#;/*- 滑道 -*/ }

passes in both html and xhtml, Because * is to define any tag on the page, of course it also includes the "html" tag.

(ps: In fact, it is not so much the difference between html and xhtml as it is the difference between whether there is XHTML 1.0 transitional doctype, but if you remove the XHTML 1.0 transitional doctype from the page, then this page There is no doctype. The default display method is html4.01. However, you have to change the XHTML 1.0 transitional doctype to HTML 4.01 doctype. The same page definition body will not have any effect, although the standard of this page is html 4.01)

(Learning video sharing:css video tutorial)

The above is the detailed content of How to hide the scroll bar in css. For more information, please follow other related articles on the PHP Chinese website!