CSS to change the default browser scroll bar style

　　Foreword

　　　　Recent always see a site scroll bar instead of the browser default styles, but a custom style

　　　The left figure is a color when scrolling with the mouse wheel, the right color to the hover

　　　　Suddenly to the spirits and there is a doubt, this is how to achieve it?

　　solve

　　　　　 Note: After testing, currently only supports webkit browser kernel, such as, Google, Safari, speed mode edge, 360 and 360 speed secure browser, Firefox, IE, opera, etc. are not supported

　　Demo

<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            ::-webkit-scrollbar {
                /*改变滚动条宽度*/
                width: 15px;
            }
            
            ::-webkit-scrollbar-track {
                /*改变滚动条轨道颜色*/
                border-radius: 10px;
                background-color: #F0F0F0;
                -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
            }
            
            ::-webkit-scrollbar-thumb {
                /*改变滚动条滑轨相关的样式*/
                border-radius: 10px;
                background-color: #ccc;
            }
            /* 移入鼠标效果 */
            
            ::-webkit-scrollbar-thumb:hover {
                border-radius: 10px;
                background-color: #A3A3A3;
                -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            }
            
            div {
                font-size: 600px
            }
        </style>
    </head>

    <body>
        <div class="test1">666</div>
        <div class="test2">888</div>
        <div class="test3">999</div>
        <div class="container">
            <div class="test4">000</div>
        </div>
    </body>

</html>

　　参考原文：https://blog.csdn.net/qq_36763293/article/details/82779922

CSS to change the default browser scroll bar style

Guess you like