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

拼搏现实的明天。 2022-05-15 14:54 1029阅读 0赞

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

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

![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>

> 作者：[黄河爱浪][Link 1] QQ：1846492969，邮箱：helang.love@qq.com
> 
> 微信公众号：`web-7258`，本文原创，著作权归作者所有，转载请注明原链接及出处。
> 
> 更多精彩文章，请扫下方二维码关注我的公众号
> 
> ![20190512094840637.jpg][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU_size_16_color_FFFFFF_t_70]: /images/20220503/fc1e4201ae614d57add9752269aa8540.png
[Link 1]: https://blog.csdn.net/u013350495
[20190512094840637.jpg]: /images/20220503/e0810ab209554301afb13b9ede783357.png