1. Set overflow content overflow (set whether the set object displays a scroll bar)
Settings for overflow-x horizontal content Overflow
Settings for overflow-y vertical content Overflow
The values of the preceding three attributes are visible (default), scroll, hidden, and auto.
2. scrollbar-3d-light-color three-dimensional scroll bar bright side color (set the color of the scroll bar)
Scrollbar-arrow-color the color of the upper and lower arrow of the buttons
Scrollbar-base-color Basic Color of the scroll bar
Scrollbar-Dark-shadow-color the color of the strong shadow of the three-dimensional scroll bar
Scrollbar-face-color of the protruding part of the stereo scroll bar
Scrollbar-Highlight-color the color of the blank area of the scroll bar
Scrollbar-shadow-color specifies the color of the shadow of a three-dimensional scroll bar.
We use several examples to explain the above style attributes:
1. Make the browser window never show a scroll bar
No horizontal scroll bar
<Body style = "overflow-X: hidden">
No vertical scroll bar
<Body style = "overflow-Y: hidden">
No scroll bar
<Body style = "overflow-X: hidden; overflow-Y: hidden"> or <body
Style = "overflow: hidden">
2. Set the scroll bar of the multi-line text box
No horizontal scroll bar
<Textarea style = "overflow-X: hidden"> </textarea>
No vertical scroll bar
<Textarea style = "overflow-Y: hidden"> </textarea>
No scroll bar
<Textarea style = "overflow-X: hidden; overflow-Y: hidden"> </textarea>
Or <textarea style = "overflow: hidden"> </textarea>
3. Set the color of the window scroll bar
Set the color of the window scroll bar to Red <body style = "scrollbar-base-color: Red">
Scrollbar-base-color sets the basic color. Generally, you only need to set this attribute to change the color of the scroll bar.
Add a special effect:
<Body style = "scrollbar-arrow-color: yellow; scrollbar-base-color: lightsalmon">
4. Define a class in the style sheet file and call the style sheet.
<Style>
. Coolscrollbar {scrollbar-arrow-color: yellow; scrollbar-base-color: lightsalmon ;}
</Style>
Call this method as follows:
<Textarea class = "coolscrollbar"> </textarea>
Scrollbar-face-color specifies the surface color of the scroll bar;
Scrollbar-Highlight-color specifies the color of the top and left slopes of the scroll bar;
Scrollbar-shadow-color specifies the color of the lower and right slopes of the scroll bar;
Scrollbar-3Dlight-Color for the scroll bar top and left edge color settings;
Scrollbar-arrow-color indicates the color of arrows at both ends of the scroll bar.
Scrollbar-track-color is used to set the color of the scroll bar background;
Scrollbar-darkshadow sets the color of the bottom and right edge of the scroll bar.
Example:
body {
background-color: # ffffff;
color: #336699;
SCROLLBAR-FACE-COLOR: # bed8eb;
SCROLLBAR-SHADOW-COLOR: # ddf8ff;
SCROLLBAR-HIGHLIGHT-COLOR: #92c0d1;
SCROLLBAR-3DLIGHT-COLOR: # ddf8ff;
SCROLLBAR-DARKSHADOW-COLOR: #92c0d1;
SCROLLBAR-TRACK-COLOR: # bed8eb;
SCROLLBAR-ARROW-COLOR: #92c0d1
}