How to change scroll bar style with css

In web development, scroll bars are a frequently used feature. However, browser default scroll bar styles do not always meet the needs of developers or users. Therefore, we can change the appearance of the scroll bar through CSS styles.

CSS3 provides a set of pseudo-element attributes for customizing scroll bars. These attributes can be used to change the style of the scroll bar. The following are several commonly used attributes:

• ::-webkit-scrollbar: Acts on webkit core browsers (Chrome and Safari)
• ::-moz-scrollbar: Acts on Firefox browser
• ::-o-scrollbar: Acts on Opera browser
• ::-ms-scrollbar: Acts on Internet Explorer browser

We Take the Chrome browser as an example to introduce how to use CSS to change the scroll bar style.

First, we need to use the above pseudo-elements to select the scroll bar:

/* 选中垂直滚动条 */
::-webkit-scrollbar {
  width: 10px; /* 设置滚动条宽度 */
}

/* 选中水平滚动条 */
::-webkit-scrollbar-horizontal {
  height: 10px; /* 设置滚动条高度 */
}

/* 选中滚动条轨道 */
::-webkit-scrollbar-track {
  background: #eee; /* 设置滚动条轨道颜色 */
}

/* 选中滚动条滑块 */
::-webkit-scrollbar-thumb {
  background: #aaa; /* 设置滚动条滑块颜色 */
}

In the code, we use 4 pseudo-elements to select different parts of the scroll bar, namely::-webkit -scrollbar, ::-webkit-scrollbar-horizontal, ::-webkit-scrollbar-track and ::-webkit-scrollbar-thumb.

Among them, ::-webkit-scrollbar is used to select the entire scroll bar and set the width of the scroll bar. ::-webkit-scrollbar-horizontal is used to select the horizontal scroll bar and set the height of the scroll bar. ::-webkit-scrollbar-track is used to select the track part of the scroll bar and set the color of the track. ::-webkit-scrollbar-thumb is used to select the slider part of the scroll bar and set the color of the slider.

If you want to achieve the style effect when sliding over the slider, you can use the hover pseudo-class to select the slider:

/* 选中滑过滚动条滑块部分 */
::-webkit-scrollbar-thumb:hover {
  background: #666;
}

In addition to the style attributes introduced above, there are some other attributes that can be used Used to change the appearance of the scroll bar, such as border-radius, box-shadow, etc. It should be noted that most of these properties are only valid in webkit browsers, and the implementation of different browsers may be slightly different.

In addition, we can also use third-party CSS libraries, such as Perfect Scrollbar and JScrollPane, to more easily implement customized scroll bar styles.

In short, through CSS styles, we can change the appearance of the scroll bar very flexibly to achieve better user experience and web design.

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