美文网首页web
滚动条默认样式修改

滚动条默认样式修改

作者: lvyweb | 来源:发表于2018-12-29 09:50 被阅读3次

    标签(空格分隔): css


    浏览器自带滚动条总是不能够完全适应项目的样式,修改滚动条样式

    <style type="text/css">
    .list-auto::-webkit-scrollbar {
            /*高宽分别对应横竖滚动条的尺寸*/
            width: 6px;
            height: 10px;
        }
    .list-auto {
        height: 266px;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .list-auto::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 5px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: pink;
    }
    .list-auto::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 0;
        background: #3F4147;
    }
    .list-auto::-webkit-scrollbar-thumb:hover{
        background: skyblue;
    }
    
    div{
        width: 200px;
        border: 1px solid #000;
    }
    
    
        </style>
    </head>
    <body>
        <div class="list-auto">
    The most distant way in the world 
    
    The most distant way in the world 
    
    is not the way from birth to the end. 
    
    it is when i sit near you 
    
    that you don't understand i love u. 
    
    The most distant way in the world 
    
    is not that you're not sure i love u. 
    
    It is when my love is bewildering the soul 
    
    but i can't speak it out. 
    
    The most distant way in the world 
    
    is not that i can't say i love u. 
    
    it is after looking into my heart 
    
    i can't change my love. 
        </div>
    </body>
    </html>
    
    gun.png

    相关文章

      网友评论

        本文标题:滚动条默认样式修改

        本文链接:https://www.haomeiwen.com/subject/cmculqtx.html