When a piece of text is too long, after using the overflow:auto attribute, a scroll bar will appear in the area where the text is located. Sometimes, we need to customize the browser's scroll bar style, which can be achieved by using the scrollbar-thumb property of css3.
First look at the compatibility of this property.
It can be seen that this attribute is not particularly well supported on the PC side, only webkit browsers are supported, and the attribute needs to be prefixed with -webkit-.
Therefore, please check the effect in Chrome or Safari browser on the PC side.
Let's take a look at the usefulness of each attribute of the scroll bar selector.
::-webkit-scrollbar — the entire scrollbar.
::-webkit-scrollbar-button — the button (up and down arrows) on the scrollbar.
::-webkit-scrollbar-thumb — the scroll thumb on the scrollbar.
::-webkit-scrollbar-track — Scrollbar track.
::-webkit-scrollbar-track-piece — The track piece of a scrollbar without a slider.
::-webkit-scrollbar-corner — Corner where both vertical and horizontal scrollbars meet.
::-webkit-resizer — Partial styling of the corner part of certain elements (example: draggable buttons of textarea).
The descriptions of the above properties are excerpted from MDN (https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-webkit-scrollbar)
According to the above introduction, you can write a custom scroll bar effect.
/* 整个滚动条的样式 */
::-webkit-scrollbar {
width: 16px;
height: 16px;
border: 2px solid #f2f2f2;
background-color: #F2F2F2;
}
/* 滚动条的轨道两端按钮，允许通过点击微调小方块的位置 */
::-webkit-scrollbar-button {
display: none;
}
/* 滚动条的轨道样式 */
::-webkit-scrollbar-track {
background-color: #F2F2F2;
}
/* 内层轨道样式 */
::-webkit-scrollbar-track-piece {
background-color: #f2f2f2;
}
/* 滚动条里面的小方块，能上下移动 */
::-webkit-scrollbar-thumb {
border-radius: 6px;
box-shadow: inset 0 0 1px 0 #f2f2f2;
border: 3px solid #f2f2f2;
background-color: #D9D9D9;
}
/* 滚动条滑块hover时样式 */
::-webkit-scrollbar-thumb:vertical:hover,
::-webkit-scrollbar-thumb:horizontal:hover {
background-color: #c0c0c0;
}
The code operation effect is as follows:
There are also some pseudo-classes that can also be used for scroll bars.
:horizontal
//horizontal伪类适用于任何水平方向的滚动条
:vertical
//vertical伪类适用于任何垂直方向的滚动条
:decrement
//decrement递减伪类适用于按钮和轨道碎片。它指示按钮或轨道片段在使用时是否将递减视图的位置（例如可以使区域向上或者向右移动的区域和按钮）。
:increment
//increment增量伪类应用于按钮和轨道碎片。它指示按钮或轨道片段在使用时是否将增加视图的位置（例如可以使区域向下或者向左移动的区域和按钮）。
:start
//start伪类适用于按钮和轨道碎片。表示对象（按钮 轨道碎片）是否放在滑块的前面
:end
//end伪类适用于按钮和轨道碎片。表示对象（按钮 轨道碎片）是否放在滑块的后面
:double-button
//double-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。也就是轨道碎片紧挨着一对在一起的按钮。
:single-button
//single-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一个按钮。也就是轨道碎片紧挨着一个单独的按钮。
:no-button
no-button伪类表示轨道结束的位置没有按钮。
:corner-present
//corner-present伪类表示滚动条的角落是否存在。
:window-inactive
//适用于所有滚动条，表示包含滚动条的区域，焦点不在该窗口的时候。
::-webkit-scrollbar-track-piece:start {
/*滚动条上半边或左半边*/
}
::-webkit-scrollbar-thumb:window-inactive {
/*当焦点不在当前区域滑块的状态*/
}
::-webkit-scrollbar-button:horizontal:decrement:hover {
/*当鼠标在水平滚动条下面的按钮上的状态*/
}
In addition, :enabled, :disabled, :hover, :active pseudo-classes can also be used for scrollbars.