Home > Article > Web Front-end > CSS: Introduction to scrollbar attribute knowledge and style classification
CSS: Introduction to scrollbar attribute knowledge and style classification
- 黄舟Original
- 2017-07-03 11:11:002047browse
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">
No vertical scrollbar
<body style="overflow-y:hidden">
No scrollbar
<body style="overflow-x:hidden;overflow-y:hidden">
or
<body style="overflow:hidden"> http://www.o.com
2. Set the scroll bar of 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 red7b00f635d272d8dd019553a851628f99
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">
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 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为滚动条下边和右边边沿颜色设定。
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
}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!