How to set html scroll bar style

How to set the html scroll bar style: first create a new document, then create a new CSS file; then create a DIV tag and fill in the content, and set the size of the scroll bar inner frame, the code is [overflow-y: scroll; overflow-x: scroll;].

The operating environment of this tutorial: windows7 system, html5&&css3 version, DELL G3 computer.

How to set the HTML scroll bar style:

1. Create a new HTML document and set up the basic structure here.

#2. Create a new CSS file and associate it with the HTML document using link.

3. Create a DIV tag and fill it with content.

#4. First set the size of the inner frame of the scroll bar, and use border to check whether there is any excess. It can be seen that a lot of content is exceeded.

5、

overflow-y: scroll;

overflow-x: scroll;

Add this The style scroll bar will appear.

6,

#ds::-webkit-scrollbar-track {
    background-color: green;
}
 
#ds::-webkit-scrollbar {
    width: 20px;
}
 
#ds::-webkit-scrollbar-thumb {
    background-color: pink;
    border-radius: 50%;
}

Now we can style the tracks and scroll bars.

Related learning recommendations: html tutorial

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