乐趣区

关于javascript:webkit内核浏览器自定义滚动条样式

jiezi 
::-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 相同。

<!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>
退出移动版