滚动条样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改滚动条颜色</title>
    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
            background-color: #F3F3F3;
            font-size: 14px;
            font-family: 'Microsoft YaHei', 'Times New Roman', Times, serif;
            letter-spacing: 0;
            color: #333333;
        }
        div{
            width: 200px;
            height: 200px;
            padding: 20px;
            overflow: auto;
            margin: 50px auto;
        }

        /* IE 浏览器 */
        .scrollbar{
            /*三角箭头的颜色*/
            scrollbar-arrow-color: #fff;
            /*滚动条滑块按钮的颜色*/
            scrollbar-face-color: #0099dd;
            /*滚动条整体颜色*/
            scrollbar-highlight-color: #0099dd;
            /*滚动条阴影*/
            scrollbar-shadow-color: #0099dd;
            /*滚动条轨道颜色*/
            scrollbar-track-color: #0066ff;
            /*滚动条3d亮色阴影边框的外观颜色——左边和上边的阴影色*/
            scrollbar-3dlight-color:#0099dd;
            /*滚动条3d暗色阴影边框的外观颜色——右边和下边的阴影色*/
            scrollbar-darkshadow-color: #0099dd;
            /*滚动条基准颜色*/
            scrollbar-base-color: #0099dd;
        }

        /* chrome & safari 浏览器 */
        /*滚动条整体部分,必须要设置*/
        .scrollbar::-webkit-scrollbar{
            width: 0px;
            height: 10px;
            background-color: #0099ff;
        }
        /*滚动条的轨道*/
        .scrollbar::-webkit-scrollbar-track{
            background-color: #0099ff;
        }
        /*滚动条的滑块按钮*/
        .scrollbar::-webkit-scrollbar-thumb{
            border-radius: 0;
            background-color: #f00;
            box-shadow: inset 0 0 5px #f00;
        }
        /*滚动条的上下两端的按钮*/
        .scrollbar::-webkit-scrollbar-button{
            height: 0;
            background-color: #0099ff;
        }
    </style>
</head>
<body>
    <div class="scrollbar">
        <h3>1846492969</h3>
        <h3>helang.love@qq.com</h3>
        <h3>web-7258</h3>
        <h3>WEB前端梦之蓝</h3>
        <h3>1846492969</h3>
        <h3>helang.love@qq.com</h3>
        <h3>web-7258</h3>
        <h3>WEB前端梦之蓝</h3>
    </div>
</body>
</html>
赞(0) 打赏
取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

    暂无评论...