How to hide scroll bars with CSS

This article mainly uses three methods to share with you how to hide scroll bars in CSS. Here I recommend the second method, of course, based on the actual situation. Friends who are interested in this article should learn together

Hide scroll bars in xhtml
When using ie6 to browse a framed xhtml page, the horizontal and vertical scroll bars will appear together by default. This is ie6 A bug, which is normal on Firefox, occurs due to a flaw in its interpretation of the XHTML 1.0 transitional doctype. There are generally three solutions to this bug,
Method 1:
Code ：
Program code

html { overflow-y: scroll; }

Principle: Force the display of IE's vertical scroll bar, while ignoring the horizontal scroll bar
Advantages: Completely solves this problem, allowing you to maintain the complete XHTML doctype.
Disadvantages: Vertical scroll bars appear even when the page does not require vertical scroll bars.
Method 2: (Recommended)
Code:
Program code

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

Principle: Hide horizontal scrolling, vertical scrolling is adaptive according to the content
Advantages: This problem is solved visually. The vertical scroll bar is not forced to appear when it is not necessary.
Disadvantages: Only the horizontal scroll bar is hidden. If the page really needs the horizontal scroll bar,
content outside the screen It will not be 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 directions of margin, IE adds the Once the value is accurate, the illusion of the need for scroll bars will be removed.
Advantages: This problem is solved visually. Vertical scrolling is adaptive according to the content
Disadvantages: Due to the "artificially created" 15px margin ( margin), so 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
Program code

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 to xhtml It worked. I believe many good friends have encountered the same problem
So how can I apply the scroll bar style under xhtml? Look at the following code
Program code

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 an 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.
Looking at the picture, it is obvious that the body tag itself is not the root element, 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 child element. ok, we know the principle, let's do an experiment. If the definition "body" or "xhtml" is replaced by "*",
Program code

*{ 
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 *It is to define any tag on the page, of course, including 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, and the default display method is html4.01, but 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)

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

css html to implement a simple calendar

CSS3 to create rounded images and oval images

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