CSS: scrollbar style properties and classification

Overflow overflow setting contents (setting whether the object is set to a scroll bar)
Setting overflow overflow-x content in the horizontal direction
Setting overflow overflow-y direction perpendicular to the content

The above three property values visible (default value) , Scroll, hidden, Auto .

scrollbar-3d-light-color color bright side perspective view of the rolling bar (the color of the scroll bar is provided)
The scrollbar-arrow-color color triangle button down arrow
The basic color scrollbar-base-color scrollbar
scrollbar-dark-shadow-color three-dimensional scroll bar color strong shadow
scrollbar-face-color stereoscopic color projection portion scrollbar
Color space portion scrollbar scrollbar-highlight-color
scrollbar-shadow-color three-dimensional scroll bar color of shadow

Let's explain the above style properties through a few examples:
1. Have the browser window scrollbars never appear

No horizontal scroll bar <body style = "overflow-x: hidden">
No vertical scrollbar <body style = "overflow-y: hidden">
没有滚动条 <body style="overflow-x:hidden;overflow-y:hidden">或<body style="overflow:hidden"> http://www.o.com

2. Set the scroll bar multiline text box

No horizontal scroll bar <textarea style = "overflow-x: hidden"> </ textarea>
No vertical scrollbar <textarea style = "overflow-y: hidden"> </ textarea>
没有滚动条 <textarea style="overflow-x:hidden;overflow-y:hidden"></textarea> 或<textarea style="overflow:hidden"></textarea>

3. Set the color of the window scroll bar

Settings window scroll bar color is red <body style = "ScrollBar-Base-Color: Red">
ScrollBar-Color Base-basic color is set, only need to set a property which can be achieved under normal circumstances to change the color of the scroll bar the goal of.
With a little particular effect:
<body style = "arrow arrow-ScrollBar-Color: Yellow; ScrollBar-Base-Color: LightSalmon">

4. The definition of a good class in the style sheet file, call the style sheet.

<style>
  .coolscrollbar{scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon;}
</style>

This call:

<textarea class="coolscrollbar"></textarea>

Scrollbar-Face-Color surface color is set to a scroll bar;
Scrollbar-Highlight-Color set on the scroll bar left slope and slope color;
Scrollbar-Shadow-Color color ramp is an inclined surface and a right scroll bar set;
Scrollbar-3Dlight-Color color of the scroll bar upper edge and the left set;
Scrollbar-Arrow-Color of the arrow of the scrollbar color setting.
Scrollbar-Track-Color color plate is set to a scroll bar;
Scrollbar-Darkshadow set lower scroll bar and the right edge color.

For 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 
}

Description: scrollbars and height div must be used in conjunction with, if div height is not set, the scroll bar property is set to fail

Reproduced in: https: //www.cnblogs.com/JoannaQ/p/3151838.html

CSS: scrollbar style properties and classification

Guess you like