Scrollbar attribute and style details
1. Setting when overflow content overflows (set whether the set object displays scroll bar)
Overflow-x setting when horizontal content overflows
Overflow-y vertical content overflow settings
The values set for the above three attributes are visible (default), scroll, hidden, and auto.
2. Scrollbar-3d-light-color The color of the bright edge of the scroll bar (set the color of the scroll bar)
Scrollbar arrow color
Scrollbar base color
Scrollbar mark shadow color
Scrollbar face color
Scrollbar height color
Scrollbar shadow color
Let's explain the above style attributes through several examples:
1. Let browser The scroll bar never appears in the window
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 scroll bar of multiline 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="scroll 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 it like this:
<textarea class="coolscrollbar"></textarea>
Scrollbar Face Color is the color setting of scroll bar surface;
Scrollbar Height Color is the color setting of scroll bar upper slope and left slope;
Scrollbar Shadow Color is the color setting of the lower slope and the right slope of the scroll bar;
Scrollbar-3Dlight Color is the color setting of the upper and left edges of the scroll bar;
Scrollbar Arrow Color is the color setting of the arrows at both ends of the scroll bar.
Scrollbar Track Color is the color setting of scroll bar bottom plate;
Scrollbar Shadow is the color setting for the bottom and right edges of the scroll bar.
give an 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
}
