How to use CSS to modify the style of the browser scroll bar (detailed example)

With the development of the Internet, people have higher and higher requirements for pages, which are not only easy to use, but also good-looking. Front-end developers are no strangers to browser scroll bars. When some of the built-in scroll bars cannot satisfy our aesthetics, do you know How to use CSS to modify the style of browser scroll bars? Today I will introduce to you how to set the div scroll bar style. Friends in need can refer to it.

Before we customize the scroll bar style, we must first understand the structure of the scroll bar. Generally speaking, the scroll bar consists of two parts: one part is the sliding part, which we call the slider; the other part is the track of the scroll bar, which is the track of the slider. Generally speaking, for the sake of appearance, the slider The color is darker than the track.

First introduce the CSS codes related to the scroll bar and their meaning

::-webkit-scrollbar: refers to the entire part of the scroll bar, its properties include width, height, background, etc.
::-webkit-scrollbar-button: refers to the buttons on both sides of the scroll bar. You can use display:none to hide it when you don’t need it.
::-webkit-scrollbar-track: refers to the outer track part. When you don’t need it, you can use display:none to hide it. You can also add what you want. Color
::-webkit-scrollbar-track-piece: refers to the inner track part, that is, the middle part of the scroll bar
::-webkit-scrollbar-thumb: refers to the draggable part of the scroll bar, also It’s the slider
::-webkit-scrollbar-corner: refers to the corner part
::-webkit-resizer: It is used to define the style of the slider in the lower right corner

But the most commonly used one is The scroll bar has three parts: the overall part (-webkit-scrollbar), the slider (-webkit-scrollbar-thumb) and the outer track (-webkit-scrollbar-track).

Next, we will hide the excess part of the div box, set the scroll bar style to the div, and see how to use CSS to implement the scroll bar style.

HTML part:

<div class="scroll">
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>    
    </div>

CSS part:

.scroll{
            margin:100px auto;
            border: 1px solid #000; 
            width: 200px;
            height: 300px;
            overflow: auto;
        }
        .scroll::-webkit-scrollbar {
            width: 10px;
           height: 10px;
        }
        /*正常情况下滑块的样式*/
        .scroll::-webkit-scrollbar-thumb {
            background-color: rgba(0,0,0,.05);
            border-radius: 10px;
            -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1);
        }
        /*鼠标悬浮在该类指向的控件上时滑块的样式*/
        .scroll:hover::-webkit-scrollbar-thumb {
           background-color: rgba(0,0,0,.2);
            border-radius: 10px;
            -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1);
        }
        /*鼠标悬浮在滑块上时滑块的样式*/
        .scroll::-webkit-scrollbar-thumb:hover {
            background-color: rgba(0,0,0,.4);
            -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1);
        }
        /*正常时候的主干部分*/
        .scroll::-webkit-scrollbar-track {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
           background-color: white;
        }
        /*鼠标悬浮在滚动条上的主干部分*/
        .scroll::-webkit-scrollbar-track:hover {
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.4);
            background-color: rgba(0,0,0,.01);
        }

Rendering:

##Note: If If it is a horizontal scroll bar, then the width attribute does not work, and height can set the height of the scroll bar; if it is a vertical scroll bar, then the height height does not work, and width can be used to set the width of the scroll bar. You can set the desired style according to your needs at work. Friends who have not interacted with it can try it more and deepen their understanding of knowledge points. I hope it can help you!

The above is the detailed content of How to use CSS to modify the style of the browser scroll bar (detailed example). For more information, please follow other related articles on the PHP Chinese website!