修改浏览器滚动条样式(兼容IE)-蒲公英云

修改浏览器滚动条样式(兼容IE)

通常为了满足页面整体的风格的情况下，需要修改滚动条的颜色，各大视频网站都是以添加自定义滚动条的方式来满足，其实也可以理解，毕竟好像就只要添加一两个而已。如果是做管理系统或者其它需要多处修改浏览器滚动条的地方，通过自定义的方式显然不是个好办法。修改浏览器滚动条样式，请看下面的源码：

源码对每个属性都有详细的解释，并附有个人的释义助于更好的理解

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU_size_16_color_FFFFFF_t_70

<!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: 10px;
            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>