How to change browser scroll bar style using css

Note: This method is only applicable to -webkit- kernel browser

The scroll bar appearance consists of two parts:

1. The overall scroll bar Slide rail

2. Scroll bar Slider in slide rail

In CSS, the scroll bar consists of 3 parts

name::-webkit-scrollbar //滚动条整体样式

name::-webkit-scrollbar-track //滚动条滑轨

name::-webkit-scrollbar-thumb //滚动条内部滑块

Note: The above 3 are pseudo-classes, please Change the name to the name of the element that needs to be changed

(Related video tutorial recommendation: css video tutorial)

For example: change the scroll bar style of the entire page

body::-webkit-scrollbar{ //先改变body的滚动条宽度

width: 8px;

}

body::-webkit-scrollbar-track{//再改变body的滚动条轨道颜色

background: rgb(200, 200, 200);

border-radius: 5px;

}

body::-webkit-scrollbar-thumb{//最后改变body的滚动条滑轨相关的样式

background: rgb(120, 120, 120);

border-radius: 5px;

}

You can add background, transparency, border, rounded corners and other attributes to the style to make the browser more beautiful.

Recommended tutorial: css quick start

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