CSS3 changes the browser scroll bar style

Note: This method is only applicable to webkit-based browsers.

The browser scroll bar is too wide and ugly, which affects daily development. What should I do?

The appearance of the scroll bar consists of two parts: 1. The overall slide of the scroll bar 2. The slider inside the scroll bar slide

In CSS, the scroll bar consists of 3 parts

name::-webkit-scrollbar //Overall scrollbar stylename::-webkit-scrollbar-track //Scrollbar trackname::-webkit-scrollbar-thumb //Scrollbar internal slider

Note: The above three are all pseudo-classes. Please change name to the element name you want to change.

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

body::-webkit-scrollbar{ //First change the scroll bar width of body: 8px;

}

body::-webkit-scrollbar-track{//Change the scroll bar track color of the body background: rgb(200, 200, 200);

border-radius: 5px;

}

body::-webkit-scrollbar-thumb{//Finally, change the style of the body's scroll bar slide background: rgb(120, 120, 120);

border-radius: 5px;

}

◆ The right side shows the scroll bar style after the upper code is changed

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

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.