css--scroll bar setting;

CSS scroll bar implementation steps and beautification tips

1. Overflow-y: Sets how content is managed when the object's content exceeds its specified height overflow-x: Sets how content is managed when the object's content exceeds its specified width.

Parameters:
Visible: Enlarge area to show all content

Auto: Add scroll bar only if content exceeds qualified value

Hidden: Always Hide scroll bars

Scroll: Always show scroll bars

2, Height: Set the height of the scroll bar (modify the following values can be).

3. Scroll bar color parameter setting:

Scrollbar-3d-light-color set or retrieve the scroll bar light border color

Scrollbar-highlight-color set or retrieve the bright edge (threedhighlight) color of the ScrollBar 3D interface

Scrollbar-face-color set or retrieve the color of the scrollbar 3D surface (threedface)

Scrollbar-arrow-color set or retrieve the color of the scrollbar direction arrows

Scrollbar-shadow-color set or retrieve the dark Edge (Threedshadow) color of the ScrollBar 3D interface

Scrollbar-dark-shadow-color set or retrieve the scroll bar Dark border (Threeddarkshadow) color

Scrollbar-base-color set or retrieve the ScrollBar datum color

To set the scrollbar style in the original HTML, we can define the scroll bar for the entire page.
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
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 us test again, the "body" of the HTML page is modified to "HTML" test, and 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 in HTML is body, because HTML is not very standard so it can be effective, and in XHTML this is not, I look at that figure is obvious, the body tag itself is not the root element, only HTML is the root element, and the page scroll bar is also the root element, So that's why we define body without effect, because we define just a sub-primitive. OK, we know the principle, to do an experiment if you change the definition of "body" or "xhtml" to "*",
*{
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:#;
}

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 of this page is HTML 4.01) CSS hidden scroll bar (horizontal, firm) the web said that using OVERFLOW-Y:HIDDENCSS can hide the scroll bar, but only for the DIV element, can not hide the browser, and some information said <boby> Add Scroll= "No", can hide scroll bar, add style= "Overflow-x:hidden" in <boby>, can hide horizontal scroll bar, add style= "Overflow-y:hidden", can hide vertical scroll bar.

1. Completely hidden

Add Scroll= "No" to hide the scroll bar;

2. Hide when not needed

The scroll bar is not displayed when the width or height of the browser window is larger or wider than that of the page;

3. Style Sheet method

Add style= "Overflow-x:hidden" to hide the horizontal scroll bar;

Add style= "Overflow-y:hidden" to hide the vertical scroll bar.

　　

Body{Overflow-x:hidden;} is not allowed under the standard DTD

HTML {overflow:scroll;}

Force Hide scroll bar:

HTML {Overflow:hidden;}

To hide the horizontal scroll bar of IE:

HTML {overflow-x: hidden;}

To hide the vertical scroll bar for IE:

HTML {overflow-y: hidden;}

Force display of IE's horizontal scroll bar:

HTML {overflow-x: scroll;}

To force the display of the vertical scroll bar for IE:

HTML {overflow-y: scroll;}

Force display of Mozilla's horizontal scroll bar:

HTML {overflow:-moz-scrollbars-horizontal;}

Note: Only the horizontal scroll bar is forced to appear. That is, the vertical scroll bar does not appear even if you need to display a vertical scrollbar.

Force display of Mozilla's vertical scroll bar:

HTML {overflow:-moz-scrollbars-vertical;}

Note: Only the vertical scroll bar is forced to appear. That is, the horizontal scroll bar does not appear even if you need to display a horizontal scroll bar.

The Final Solution:

Add on page:

< < Span class= "Hljs-name" >style>html {overflow-x:hidden;//Hide horizontal scroll bar overflow-y:hidden;//hide vertical scrollbar}</< Span class= "Hljs-name" > style>   

CSS how to beautify the scroll bar various browser support for CSS scroll bar: Here the WebKit browser includes Google browser, Apple's Safari browser, and the latest opera browser. These browsers add up to more than half of the desktop browser market share. For mobile browsers, it is basically the world of Google Chrome and Safari browser. The only regret is that Firefox has not made any improvements to the CSS scroll bar properties so far. As for IE browser, we look forward to it.

In view of the current browser market pattern, we are confident that the CSS scroll bar beautification function will have a very good bright future. Many years ago, Google Chrome has started to support CSS beautification of the scroll bar. These WebKit browser-specific CSS properties need to use the-webkit-browser engine prefix, we will only use some basic CSS scroll bar properties here, in the code will add some necessary explanations.

::-webkit-scrollbar {  width: 15px;} /* 这是针对缺省样式 (必须的) */

When a pseudo-element style appears in the CSS, the WebKit engine will turn off its default scrollbar style output, using only the style information provided in the CSS. Here are some other pseudo-element styles:

::-webkit-scrollbar-track {  background-color: #b46868;} /* 滚动条的滑轨背景颜色 */::-webkit-scrollbar-thumb {  background-color: rgba(0, 0, 0, 0.2); } /* 滑块颜色 */::-webkit-scrollbar-button {  background-color: #7c2929;} /* 滑轨两头的监听按钮颜色 */::-webkit-scrollbar-corner {  background-color: black;} /* 横向滚动条和纵向滚动条相交处尖角的颜色 */

css--scroll bar settings;