CSS: Introduction to scrollbar attribute knowledge and style classification-CSS Tutorial-php.cn

CSS: Introduction to scrollbar attribute knowledge and style classification

黄舟

Release： 2017-07-03 11:11:00

Original

2084 people have browsed it

scrollbar is also a very commonly used code in CSS. Let’s introduce it 1. overflowSettings when content overflows (setting whether the set object displays scroll bars)
overflow-xSettings when content overflows in the horizontal direction
overflow- ySettings when vertical content overflows
The values set for the above three attributes are visible (default value), scroll, hidden, and auto.
2. scrollbar-3d-light-color The color of the bright edge of the three-dimensional scroll bar (set the color of the scroll bar)
scrollbar-arrow-colorThe color of the triangular arrows on the up and down buttons
scrollbar-base-colorThe basic color of the scroll bar
scrollbar-dark-shadow-colorThe color of the strong shadow of the three-dimensional scroll bar
scrollbar-face-colorThe color of the protruding part of the three-dimensional scroll bar
scrollbar-highlight-colorThe color of the blank part of the scroll bar
scrollbar -shadow-color The color of the three-dimensional scroll bar shadow 86oo wonderful tutorial
We explain the above style attributes through several examples:
1. Let the browser window never have scroll bars
No horizontal scroll bars

<body style="overflow-x:hidden">

Copy after login

No vertical scrollbar

<body style="overflow-y:hidden">

Copy after login

No scrollbar

<body style="overflow-x:hidden;overflow-y:hidden">

Copy after login

<body 
style="overflow:hidden"> http://www.o.com

Copy after login

2. Set the scroll bar of Multi-line text box
No horizontal scroll bar

<textarea style="overflow-x:hidden"></textarea>

Copy after login

No vertical scroll bar

<textarea style="overflow-y:hidden"></textarea>

Copy after login

No Scroll bar

<textarea style="overflow-x:hidden;overflow-y:hidden"></textarea>

Copy after login

<textarea style="overflow:hidden"></textarea>

Copy after login

3. Set the color of the window scroll bar
Set the color of the window scroll bar to red
scrollbar-base-color sets the basic color. Generally, you only need to set this attribute to change the scroll bar color.
Add some special effects:

<body style="scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon">

Copy after login

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>

Copy after login

Call like this:

<textarea class="coolscrollbar"></textarea> 
Scrollbar-Face-Color为滚动条表面颜色设定； 
Scrollbar-Highlight-Color为滚动条上斜面和左斜面颜色设定； 
Scrollbar-Shadow-Color为滚动条下斜面和右斜面颜色设定； 
Scrollbar-3Dlight-Color为滚动条上边和左边的边沿颜色设定； 
Scrollbar-Arrow-Color为滚动条两端箭头颜色设定。 
Scrollbar-Track-Color为滚动条底板颜色设定； 
Scrollbar-Darkshadow为滚动条下边和右边边沿颜色设定。

Copy after login

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 
}

Copy after login

The above is the detailed content of CSS: Introduction to scrollbar attribute knowledge and style classification. For more information, please follow other related articles on the PHP Chinese website!