A simple method to hide a scroll bar in CSS, and css to hide a scroll bar

A simple method to hide a scroll bar in CSS, and css to hide a scroll bar

Hide the scroll bar in xhtml

When you use ie6 to browse the xhtml page with a framework, the system displays the horizontal and vertical scroll bars by default. This is

Bug. It is normal on firefox because it has a defect in interpreting XHTML 1.0 transitional doctype.

There are generally three solutions for this bug,

Method 1:

Code:

Program code

Html {overflow-y: scroll ;}

Principle: forcibly display the vertical scroll bar of ie, while ignoring the horizontal scroll bar

Advantage: completely solves this problem and allows you to maintain the complete XHTML doctype.

Disadvantage: even if the page does not require a vertical scroll bar, a vertical scroll bar appears.

Method 2: (recommended)

Code:

Program code

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

Principle: Hide horizontal scrolling. Vertical scrolling is adaptive to content

Advantage: this problem is solved visually. When it is not necessary, the vertical scroll bar is not forced to appear.

Disadvantage: the horizontal scroll bar is hidden. If the horizontal scroll bar is required,

Content outside the screen is invisible 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 to the horizontal and vertical directions of margin. After IE adds this exact value, it will remove the illusion of requiring the scroll bar.

Advantage: this problem is solved visually. Vertical scrolling is adaptive based on content.

Disadvantage: Because the 15px margin (margin) is created manually, this filled screen area cannot be used.

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

Set Style

In the original html, we can define the scroll bar of the entire page in this way.

Program code

Body {scrollbar-3dlight-color: # D4D0C8;/*-outermost left-*/scrollbar-highlight-color: # fff;/*-second left-*/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: #;/*-slide -*/}

　　

But the same code does not work in xhtml. I believe many good friends have encountered the same problem.

So how can I apply the scroll bar style in xhtml? See the following code

Program code

Html {scrollbar-3dlight-color: # D4D0C8;/*-outermost left-*/scrollbar-highlight-color: # fff;/*-second left-*/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: #;/*-slide -*/}

　　

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

Modify "body" to "html" and test the function. Why?

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

We define the body in html, because html is not very standard, so it can take effect, but in xhtml, it will not work,

I can see that figure. Obviously, the body tag is not a root element, only html is the root element, and the page scroll bar is also a root element, this is why we define the body as ineffective, because we define only a sub-element. Okay. Now that we know the principle, let's do a test. If we change the definition of "body" or "xhtml" "*",

Program code

* {Scrollbar-3dlight-color: # D4D0C8;/*-outermost left-*/scrollbar-highlight-color: # fff;/*-second left-*/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: #;/*-slide -*/}

　　

Both html and xhtml are passed, because * is to define any tag on the page, including 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, there is no doctype on this page, and the default display method is html4.01. However, you need to change XHTML 1.0 transitional doctype to HTML 4.01 doctype, and the page definition body will not be effective, although the standard for this page is html 4.01)