html自定义滚动条样式

helei 2020-9-27 1,215 9/27
<html>
    <style>
        html,body{
            width:100%;
            height:200%;
            background:#000;
        }
        <!-- /* IE 浏览器 */ -->
        .scrollbar{
            overflow-x:hidden;
            /*三角箭头的颜色*/
            scrollbar-arrow-color: #00d5ff;
            /*滚动条滑块按钮的颜色*/
            scrollbar-face-color: #00d5ff;
            /*滚动条整体颜色*/
            scrollbar-highlight-color: #00d5ff;
            /*滚动条阴影*/
            scrollbar-shadow-color: #00d5ff;
            /*滚动条轨道颜色*/
            scrollbar-track-color: #fff;
            /*滚动条3d亮色阴影边框的外观颜色——左边和上边的阴影色*/
            scrollbar-3dlight-color:#fff;
            /*滚动条3d暗色阴影边框的外观颜色——右边和下边的阴影色*/
            scrollbar-darkshadow-color: #fff;
            /*滚动条基准颜色*/
            scrollbar-base-color: #fff;
        }
        /* chrome & safari 浏览器 */
        /*滚动条整体部分,必须要设置*/
        .scrollbar::-webkit-scrollbar{
            width: 5px;
            height:5px;
            background-color: #fff;
        }
        /*滚动条的轨道*/
        .scrollbar::-webkit-scrollbar-track{
            background-color: #fff;
        }
        /*滚动条的滑块按钮*/
        .scrollbar::-webkit-scrollbar-thumb{
            border-radius: 0;
            background-color: #00d5ff;
            box-shadow: inset 0 0 5px #00d5ff;
        }
        /*滚动条的上下两端的按钮*/
        .scrollbar::-webkit-scrollbar-button{
            height: 0px;
            background-color: #000;
        }
    </style>
    <body class="scrollbar"></body>
</html>

- THE END -

helei

9月27日16:04

最后修改:2020年9月27日
0

非特殊说明,本博所有文章均为博主原创。