How to hide scroll bars in CSS

Hide scroll bars in XHTML

When browsing a framed XHTML page with IE6, the horizontal and vertical scrollbars will appear by default, which is a IE6

The bug, which is normal on Firefox, is due to a flaw in the interpretation of XHTML 1.0 Transitional doctype.

There are 3 common solutions for this bug,

Method 1:

Code:

Program code

HTML {overflow-y: scroll;}

Principle: force display of IE vertical scroll bar, ignoring horizontal scroll bar

Pros: Completely solves this problem, allowing you to keep the full XHTML doctype.

Cons: Vertical scrollbars appear even when the page does not need a vertical scroll bar.

Method 2: (recommended)

Code:

Program code

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

Principle: Hide horizontal scrolling, vertical scrolling based on content adaptive

Pros: Visually solves this problem. When not necessary, the vertical scrollbar is not forced to appear.

Cons: Just hide the horizontal scroll bar, if the page really needs a horizontal scroll bar,

Content outside the screen is not visible because the user cannot scroll horizontally.

Method 3:

Code:

Program code

Body {margin-right: -15px; Margin-bottom: -15px;}

Principle: This will add a negative value in the horizontal and vertical direction of margin, ie adds the exact value, it will remove the demand illusion of the scroll bar.

Pros: Visually solves this problem., vertical scrolling based on content adaptive

Disadvantage: The filled screen area cannot be used because the margin of 15px is created for people.

------------------------------------

Set style

In the original HTML, we can define the scroll bar for the entire page.

Program code

body{

Scrollbar-3dlight-color: #D4D0C8; /*-the most outward left-*/

Scrollbar-highlight-color: #fff; /*-left two-*/

Scrollbar-face-color: #E4E4E4; /*-face-*/

Scrollbar-arrow-color: #666; /*-Arrow-*/

Scrollbar-shadow-color: #808080; /*-right Two-*/

Scrollbar-darkshadow-color: #D7DCE0; /*-Right One-*/

Scrollbar-base-color: #D7DCE0; /*-Base Color-*/

scrollbar-track-color:#;/*-Chute-*/

}

But the same code that we used under XHTML doesn't work, and I'm sure a lot of good friends have the same problem.

So how do you apply the scroll bar style in XHTML? Look at the following code

Program code

html{

Scrollbar-3dlight-color: #D4D0C8; /*-the most outward left-*/

Scrollbar-highlight-color: #fff; /*-left two-*/

Scrollbar-face-color: #E4E4E4; /*-face-*/

Scrollbar-arrow-color: #666; /*-Arrow-*/

Scrollbar-shadow-color: #808080; /*-right Two-*/

Scrollbar-darkshadow-color: #D7DCE0; /*-Right One-*/

Scrollbar-base-color: #D7DCE0; /*-Base Color-*/

scrollbar-track-color:#;/*-Chute-*/

}

The only difference between this code and the previous paragraph is that on the elements of the CSS definition, one is the body and the other is HTML. Let's test it again and put the HTML page

"Body" modified to "HTML" test, found that still can achieve the effect. Why is that?

Literally, XHTML is an X more than HTML, so this x is actually XML, why add an XML in it? The most fundamental reason is to make HTML more structured and standardized (because HTML is really bad).

We define the body in HTML, because the HTML is not very standard, so it can be effective, and in XHTML this is not,

I look at that figure. Obviously, the body tag itself is not the root element, only the HTML is the root element, and the page scroll bar is also the root element, so this is why we define the body is not effective, because we define only a sub-primitive. OK, we know the principle, to do an experiment if you change the definition of "body" or "xhtml" to "*",

Program code

*{

Scrollbar-3dlight-color: #D4D0C8; /*-the most outward left-*/

Scrollbar-highlight-color: #fff; /*-left two-*/

Scrollbar-face-color: #E4E4E4; /*-face-*/

Scrollbar-arrow-color: #666; /*-Arrow-*/

Scrollbar-shadow-color: #808080; /*-right Two-*/

Scrollbar-darkshadow-color: #D7DCE0; /*-Right One-*/

Scrollbar-base-color: #D7DCE0; /*-Base Color-*/

scrollbar-track-color:#;/*-Chute-*/

}

Both HTML and XHTML pass, because * is the definition of any label on the page of course also includes the "HTML" tag.

PS: In fact, it is not so much the difference between HTML and XHTML that there is no XHTML 1.0 Transitional doctype, but if you remove the XHTML 1.0 Transitional doctype of the page, Then this page does not have DOCTYPE, the default display is html4.01, but you want to 1.0 transitional doctype XHTML to HTML 4.01 doctype the same page definition body will not be effective, Although the standard for this page is HTML 4.01)

Original: http://www.cnblogs.com/Miton/archive/2011/06/01/2066056.html

How to hide scroll bars in CSS