webkit内核浏览器自定义滚动条样式

2024年3月20日 128次阅读 来源: 阿斌 
    CSS
::-webkit-scrollbar              { /* 1 */ }
::-webkit-scrollbar-button       { /* 2 */ }
::-webkit-scrollbar-track        { /* 3 */ }
::-webkit-scrollbar-track-piece  { /* 4 */ }
::-webkit-scrollbar-thumb        { /* 5 */ }
::-webkit-scrollbar-corner       { /* 6 */ }
::-webkit-resizer                { /* 7 */ }

以上CSS代码所管辖的区域对就关系：以上注释中的数字与下图中数字相对应。

上图正如如下所言：

  1. ::-webkit-scrollbar 滚动条整体部分，其中的属性有width,height,background,border（就和一个块级元素一样）等。

  2. ::-webkit-scrollbar-button 滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。

  3. ::-webkit-scrollbar-track 外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。

  4. ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）。

  5. ::-webkit-scrollbar-thumb 滚动条里面可以拖动的那部分

  6. ::-webkit-scrollbar-corner 边角

  7. ::-webkit-resizer 定义右下角拖动块的样式

注意：对以上各个部分定义width,height时。有如下功能：若是水平滚动条，则width属性不起作用，height属性用来控制滚动条相应部分竖直方向高度；若是竖直滚动条，则height属性不起作用，width属性用来控制相应部分的宽度。对::-webkit-scrollbar-button 相反。

demo:

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <style type="text/css">        
        #test::-webkit-scrollbar {
            width: 13px;
            height: 13px;
            background-color: gray;
        }
        #test::-webkit-scrollbar-button {
            width: 13px;
            height: 13px;
            background-color: gray;
        }
        #test::-webkit-scrollbar-track {           
            background-color: gray;
        }
        #test::-webkit-scrollbar-track-piece {           
            background-color: #dedede;
            border-radius: 5px;
        }
        #test::-webkit-scrollbar-thumb {          
            background-color: #23211b;
            border-radius: 5px;
        }
        #test::-webkit-scrollbar-corner {          
            background-color: green;
        }
        #test::-webkit-resizer {       
            background-color: green;
        }
        div.scroll{
            margin: 20px auto;
            height: 100px;
            width: 100px;
            overflow: auto;
            background-color: red;
        }
        div.scroll div{
            width: 150px;
        }
    </style>
</head>
<body>

    <div id="test" class="scroll">
        <div>发的广东省大地飞歌收到合肥读后感发的广东省大地飞歌收到合肥读后感发的广东省大地飞歌收到合肥读后感发的广东省大地飞歌收到合肥读后感发的广东省大地飞歌收到合肥读后感发的广东省大地飞歌收到合肥读后感发的广东省大地飞歌收到合肥读后感
        </div>
    </div>

    <div class="scroll">
        <div>发的广东省大地飞歌收到合肥读后感发的广东省大地飞歌收到合肥读后感发的广东省大地飞歌收到合肥读后感发的广东省大地飞歌收到合肥读后感发的广东省大地飞歌收到合肥读后感发的广东省大地飞歌收到合肥读后感发的广东省大地飞歌收到合肥读后感
        </div>
    </div>
</body>
</html>

来源： https://www.lyblog.net/detail…

    原文作者：阿斌
    原文地址: https://segmentfault.com/a/1190000008877209
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞