css change scroll bar style

How to change the scroll bar style in css: 1. Set the entire part of the scroll bar through the "-webkit-scrollbar" attribute; 2. Set the buttons at both ends of the scroll bar through the "-webkit-scrollbar-button" attribute, etc. .

# The operating environment of this article: windows7 system, HTML5&&CSS3 version, Dell G3 computer.

Because scroll bars are used in most of the current projects, and sometimes simulated scroll bars are used, now the CSS of the scroll bar can also be solved.

For example, the scroll bar of NetEase mailbox looks very good, it is set using CSS, and it is for webkit browser. As shown in the picture:

Let’s explain how to use these attributes and what they mean.

1: The CSS under webkit sets the scroll bar

Mainly has the following 7 properties

::-webkit-scrollbar The entire part of the scroll bar can set the width What
• ::-webkit-scrollbar-button The buttons at both ends of the scroll bar
• ::-webkit-scrollbar-track The outer track
• ::-webkit-scrollbar -track-piece inner scroll groove
• ::-webkit-scrollbar-thumb scrolling slider
• ::-webkit-scrollbar-corner corner
• :: -webkit-resizer defines the style of the drag block in the lower right corner

As shown in the figure:

The above are the main setting properties of the scroll bar, and there are more details The CSS properties

:horizontal horizontal scrollbar

:vertical vertical scrollbar

:decrement apply to buttons and inner tracks (track pieces). It is used to indicate whether the button or inner track will reduce the position of the window (for example, above the vertical scroll bar, to the left of the horizontal scroll bar.)

:increment decrement is similar, used to indicate the button or inner track Whether the track will increase the position of the viewport (for example, below the vertical scroll bar and to the right of the horizontal scroll bar.)

:start Pseudo-class also applies to buttons and sliders. It is used to define whether the object is placed in front of the slider.

:end is similar to the start pseudo-class, identifying whether the object is placed behind the slider.

:double-button This pseudo-class is used for buttons and inner tracks. Used to determine whether a button is one of a pair of buttons placed at the same end of the scroll bar. For inner tracks, this indicates whether the inner track is next to a pair of buttons.

:single-button is similar to the double-button pseudo-class. For buttons, it is used to determine whether a button is independently in a section of the scroll bar. For inner tracks, it indicates whether the inner track is next to a single-button.

:no-button is used for the inner track, indicating whether the inner track should be scrolled to the end of the scroll bar, for example, when there are no buttons at both ends of the scroll bar.

:corner-present is used for all scroll bar tracks, indicating whether the scroll bar rounded corners are displayed.

:window-inactive is used for all scroll bar tracks, indicating whether a page container (element) to which the scroll bar is applied is currently activated. (In recent versions of webkit, this pseudo-class can also be used for the ::selection pseudo-element. The webkit team plans to extend it and promote it to become a standard pseudo-class)

CSS is also very simple, for example:

/* 设置滚动条的样式 */
::-webkit-scrollbar {
width:12px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
-webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
border-radius:10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
border-radius:10px;
background:rgba(0,0,0,0.1);
-webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background:rgba(255,0,0,0.4);
}

[Recommended learning:

css video tutorial]

2. CSS setting scroll bar under IE

It’s relatively simple under IE, since There are relatively few items defined, all are colors.

scrollbar-arrow-color: color; /
• The color of the triangular arrow/
scrollbar-face-color: color; /
• Three-dimensional scroll bar The color (including the background color of the arrow part)/
scrollbar-3dlight-color: color; /
• The color of the bright edge of the three-dimensional scroll bar/
scrollbar -highlight-color: color; /
• The highlight color of the scroll bar (left shadow?)/
scrollbar-shadow-color: color; /
• The color of the shadow of the three-dimensional scroll bar /
scrollbar-darkshadow-color: color; /
• The color of the outer shadow of the three-dimensional scroll bar/
scrollbar-track-color: color; /
• Stereoscopic scroll bar background color/
scrollbar-base-color:color; /
• Scroll bar base color/

The above is the detailed content of css change scroll bar style. For more information, please follow other related articles on the PHP Chinese website!