CSS Hide scroll bar

Source: Internet
Author: User

Hide scroll bars in XHTML
When using IE6 to browse a framed XHTML page, the default is to have horizontal and vertical scrollbars appear together, which is a bug in IE6, which is normal on Firefox, because it 1.0 to XHTML Transitional DOCTYPE's explanation is flawed. There are 3 solutions for this bug,
Method 1:

The code is as follows:
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)

The code is as follows:
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:

The code is as follows:
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.

The code is as follows:
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

The code is as follows:
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 "*",

The code is as follows:
*{
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 above content is this article introduces you to the CSS hidden scroll bar method has all the content, I hope to help you.

Look at the beautiful woman is not concerned about the little sister little brother

CSS Hide scroll bar

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.