滚动条样式修改
通常为了满足页面整体的风格的情况下，需要修改滚动条的颜色，各大视频网站都是以添加自定义滚动条的方式来满足，其实也可以理解，毕竟好像就只要添加一两个而已。如果是做管理系统或者其它需要多处修改浏览器滚动条的地方，通过自定义的方式显然不是个好办法。修改浏览器滚动条样式，请看下面的源码：
源码对每个属性都有详细的解释，并附有个人的释义助于更好的理解
<!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;
}
p{
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>
<p class="scrollbar">
<h3>1846492969</h3>
<h3>[email protected]</h3>
<h3>web-7258</h3>
<h3>WEB前端梦之蓝</h3>
<h3>1846492969</h3>
<h3>[email protected]</h3>
<h3>web-7258</h3>
<h3>WEB前端梦之蓝</h3>
</p>
</body>
</html>
作者：黄河爱浪 QQ：1846492969，邮箱：[email protected]
微信公众号：
web-7258，本文原创，著作权归作者所有，转载请注明原链接及出处。
相关阅读
关于html表格结构标签thead，tfoot，tbody使用出现不兼容
关于尽量不使用thead，tfoot，tbody这三个表格结构标签，存在浏览器兼容性问题的验证 以下是不使用这三个标签时代码demo以及运行效果（搜
菜单-----工具”选项-------清除上网痕迹
腾讯浏览器拥有双内核结构，很多时候一些网页并不支持急速内核从而导致网页打不开或者出现页面错误的情况，那么这个时候就需要切换浏
::-webkit-scrollbar{ width: 12px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px; } //滚动条整体部分，其中的属性有wi
最近在做海外项目需要定制chrome浏览器的书签和主页，在8.1的项目上实现，当时手机还没有预制GMS，只能下载chrome 这个apk做实验，出现了