HTML remove slider bar; No way; HTML also has to be studied

1.xhtml the color problem of the scroll bar

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

body{
Scrollbar-3dlight-color: #D4D0C8; /*-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:#;/*-Slide-*/
}

But the same code that we use in XHTML does not work, I believe many good friends have encountered the same problem.

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

html{
Scrollbar-3dlight-color: #D4D0C8; /*-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:#;/*-Slide-*/
}

The only difference between this piece of code and the previous paragraph is that on the elements defined by CSS, one is the body and the other is HTML. We test again, the HTML page "body" modified to "HTML" test, found that still can achieve results. What the hell is that about?

Let's take a look at the following figure:

This is the most basic DOM tree structure of HTML.

Let's look at the definition of HTML and XHTML:

HTML (Hyper Text Markup Language, Hyper-file Markup Language), Hypertext Markup Language is widely used on the Internet. HTML describes how the text datum is rendered, and how the hyperlink connects to another page.

XHTML (extensible Hypertext Markup Language, Extensible Hypertext Markup Language) is a markup language that behaves like HTML but is more restrictive in syntax. From an inheritance relationship, HTML is an application based on SGML, very flexible, whereas XHTML is based on Xml,xml as a subset of SGML. XHTML 1.0 became the recommended standard for the consortium on January 26, 2000.

XHTML is literally an X more than HTML, so this x is actually XML, why add an XML to it. The most fundamental reason is to make HTML more structured (because HTML is too bad).

OK, we came back to look at the structure tree above, we defined in the HTML is the body, because the HTML is not very standard so it can be effective, and in XHTML this is not the case, I look at the diagram is obvious, the body tag itself is not the root element, only HTML is the root element, The page's scroll bar is also part of the root element, so that's why we define the body as having no effect, because we're just defining a child. OK, we know the principle, to do a test if you change the definition "body" or "xhtml" to "*":

*{
Scrollbar-3dlight-color: #D4D0C8; /*-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:#;/*-Slide-*/
}

In both HTML and XHTML, because * is the definition of any label on the page and of course includes the "HTML" tag.

PS: In fact, it's not so much the difference between HTML and XHTML as it is with XHTML 1.0 Transitional doctype, but if you remove the XHTML 1.0 Transitional doctype of the page, Then this page is not DOCTYPE, the default display is html4.01, but you want to make XHTML 1.0 Transitional DOCTYPE modified into HTML 4.01 doctype the same page definition body will not be effective, Although the standard for this page is HTML 4.01)

2, XHTML under the frame page horizontal scroll bar problem

When browsing a framed XHTML page with IE6, the default horizontal and vertical scroll bars appear together, a bug in IE6 that is normal in Firefox and is due to a flaw in the interpretation of XHTML 1.0 Transitional doctype.

There are usually 3 solutions to this bug,

Method 1:

Code:

HTML {overflow-y: scroll;}

Principle: Force the display of IE's vertical scroll bar, and ignore the horizontal scroll bar.
Pros: Completely solves this problem, allowing you to keep the full XHTML doctype.
Disadvantage: Vertical scroll bars appear even when the page does not need a vertical scroll bar.

Method 2:

Code:

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

Principle: Hide the horizontal scrolling, the vertical scrolling is adaptive to the content.
Advantages: The visual solution to this problem. The vertical scroll bar is not forced to appear when it is not necessary.
Disadvantage: Only the horizontal scroll bar is hidden, and if the page really needs a horizontal scroll bar, the content outside the screen will not be visible because the user cannot scroll horizontally.

Method 3:

Code:

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

Principle: This adds a negative value to the horizontal and vertical direction of the margin, and when IE adds the exact value, it removes the need for the scroll bar.
Advantages: Visually solve this problem, the vertical scrolling is adaptive to the content.
Disadvantage: The populated screen area cannot be used because the 15px outer margin (margin) is created by people.

<body scroll=no>

To remove the horizontal scroll bar:
<body style= "overflow-x: Hidden" >
Remove the vertical scroll bar:
<body style= "overflow-y: Hidden" >

Hides the horizontal scroll bar and displays the vertical scroll bar:
<body style= "Overflow-x:hidden;overflow-y:scroll" >

Hide All
<body style= "Overflow:hidden" >

Or is
<body scroll= "No" >

Let's start by saying the property code for the scroll bar:
Overflow-y: Visible | Auto | Hidden | Scroll
Visible: Do not cut content nor add scroll bars.
Auto: Cut content and add scroll bars when needed
Hidden: Do not show more than the object height of the content, here does not introduce this attribute, we like words can try
Scroll: Always show vertical scroll bar

First, let me just say the way to get rid of the scroll bar:
If you use the Baidu style template, the scroll bar may only have one, that is the entire space right the largest browser window scroll bar, that is, I beautified the scroll bar, now tell you, we can take this scroll strip, but does not affect the way to browse:
In the body
{} Add Overflow-y:
The visible is OK, so the scroll bar won't show up. You may ask, how do you pull down? Hehe, since I said that does not affect the browsing, that certainly has the method, the browsing method is uses
The mouse wheel, although the scroll bar is gone, but the mouse wheel is still able to make the page scroll up and down. I believe that we generally browse the Web page with the wheel to pull down the number of pages should be more than directly drag the scroll bar with the mouse times
A lot of it. Tip, if you encounter no scroll bar and the mouse without the wheel of friends, how to browse the Web. Oh, you can use the keyboard above the arrow keys above the PageUp and PageDown
To page up and down, you can also use the space to pull down the pages and shift+ space to pull up the page, there is a way to use the arrow keys to pull, in addition to press the home key back to the top of the page, end key to
Up to the bottom of the page, oh, is not a lot of methods. However, there will always be some inconvenience, so we can according to their own space and preferences to consider the need to cancel this scroll bar.

Haha, I can't think of a way to say so many words

Here's how to add a scroll bar:
Overflow-y: auto;height: How many px
Auto
is to automatically determine whether to add a scroll bar, when the object content exceeds the height of the set, automatically add scroll bar, otherwise it does not display, body{} in the default value is
Overflow-y: auto;height: Browser height, so when the content of the Web page exceeds the height of the browser, the right side of the browser will automatically show the scroll bar to
Everyone like
If you need to set this, I suggest setting in the latest comment #m_comment{}, the article List #m_blog{} and so on content and height are not fixed templates, some friends can not find these models
Version of the ID, may be only such as #m_comment div.item{} or #m_pro a{} ID, then you can add your own ID, so you can set the

Here's another way to add a scroll bar:
OVERFLOW-Y: Scroll
The function of this parameter is explained above, but if you only add this parameter, although the scroll bar will display, but will not show the scroll bar, so you must add a
Height: how many px
The height attribute is similar to the one above, but there is a fundamental difference between the height of the object content and whether it exceeds the height set, and the scroll bar will always appear on the edge.

Below we say about the beautification of the scroll bar, this my friend showed me a description on the Internet, I think the above picture is very good, but very small, so I magnified a times, looks more clear, we first said the various properties of beautification:
Scrollbar-face-color: color code;
Scrollbar-highlight-color: color code;
Scrollbar-shadow-color: color code;
Scrollbar-3dlight-color: color code;
Scrollbar-arrow-color: color code;
Scrollbar-track-color: color code;
Scrollbar-darkshadow-color: color code;
People are not seeing so many attributes a little nodding big. Haha, rest assured, take a look at the illustrations I've just mentioned that have been magnified by me for a while and you'll feel better:

This
In the picture there is also a scrollbar-base-color attribute, in fact, this attribute is a sum of 7 attributes above, how to say it. Is that when you set the color of this property,
The previous 7 properties can not be set, the scroll bar will automatically help you set, but this setting will be based on your set Scrollbar-base-color color and automatically set
The advantage of this property is that we do not have to try to study the color of various places, but the disadvantage is not to be able to integrate colorful in one.

Note: Set the Scrollbar-base-color do not set the other seven properties, set the other seven properties do not set Scrollbar-base-color, or there may be conflict between, there will be some effect does not work

Finally, still consider everyone may like my landscaping code [really smug ~], I put my landscaping code posted:
Scrollbar-face-color: #CCFFFF;
Scrollbar-highlight-color:white;
Scrollbar-shadow-color: #813533;
Scrollbar-3dlight-color: #813533;
Scrollbar-arrow-color: #813533;
Scrollbar-track-color:white;
Scrollbar-darkshadow-color: #813533;
The above code I was added to the body{}