晴明的博客园 GitHub      CodePen      CodeWars     

[css] 自定义浏览器滚动条样式 

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Touch</title>
        <meta name="viewport" content="width=device-width, user-scalable=no">
        <style>
            ::-webkit-scrollbar {
                width: 30px;
            }
            /*必须先设置宽度后续设置才有效*/
            
            ::-webkit-scrollbar-track {
                background-color: red;
            }
            /* 滚动条的滑轨背景颜色 */
            
            ::-webkit-scrollbar-thumb {
                background-color: orange;
                border-radius: 10px;
            }
            /* 滑块颜色 */
            
            ::-webkit-scrollbar-button {
                background-color: yellow;
            }
            /* 滑轨两头的监听按钮,可以设置高度、颜色 */
            
            ::-webkit-scrollbar-corner {
                background-color: green;
            }
            /* 横向滚动条和纵向滚动条相交处尖角的颜色 */
            
            ::-webkit-scrollbar-track-piece {
                background-color: cyan;
            }
            /*内层滚动槽，会覆盖::-webkit-scrollbar-track样式*/
            
            ::-webkit-resizer {
                background-color: blue;
            }
            /*两个滚动条的交汇处上用于通过拖动调整元素大小的小控件*/
        </style>
    </head>

    <body>

        <div id="output" style="min-width:1000px;min-height:1000px;overflow: auto;background: lightblue;">
        </div>

    </body>

</html>

 

目前只有chrome浏览器支持

高度设置似乎是无效的

cursor: pointer; 似乎也是无效的

posted @ 2016-02-18 21:53  晴明桑  阅读(303)  评论(0)  编辑  收藏  举报