CSS3 changes the browser scroll bar style

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.

<<:  Several ways to encrypt and decrypt MySQL (summary)

>>:  Tutorial on deploying springboot package in linux environment using docker

Recommend

Implementation of code optimization for Vue2.x project performance optimization

Table of contents 1 Use of v-if and v-show 2. Dif...

Implementation code for installing vsftpd in Ubuntu 18.04

Install vsftpd $ sudo apt-get install vsftpd -y S...

How to configure Java environment variables in Linux system

Configure Java environment variables Here, the en...

Implementation of CSS linear gradient concave rectangle transition effect

This article discusses the difficulties and ideas...

A brief introduction to mysql mycat middleware

1. What is mycat A completely open source large d...

Nginx forwarding based on URL parameters

Use scenarios: The jump path needs to be dynamica...

Responsive layout summary (recommended)

Basic knowledge of responsive layout development ...

VMware vSAN Getting Started Summary

1. Background 1. Briefly introduce the shared sto...

Native JS to implement drag position preview

This article shares with you a small Demo that ad...

Pure CSS3 to create page switching effect example code

The one I wrote before is too complicated, let’s ...

How to set the default value of a MySQL field

Table of contents Preface: 1. Default value relat...

How to use Docker container to access host network

Recently, a system was deployed, using nginx as a...

...