修改浏览器滚动条样式
通常为了满足页面整体的风格的情况下，需要修改滚动条的颜色，各大视频网站都是以添加自定义滚动条的方式来满足，其实也可以理解，毕竟好像就只要添加一两个而已。如果是做管理系统或者其它需要多处修改浏览器滚动条的地方，通过自定义的方式显然不是个好办法。修改浏览器滚动条样式，请看下面的源码：
源码对每个属性都有详细的解释，并附有个人的释义助于更好的理解
<!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;
}
.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;
}
/*滚动条整体部分,必须要设置*/
.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>[email protected]</h3>
<h3>web-7258</h3>
<h3>WEB前端梦之蓝</h3>
<h3>1846492969</h3>
<h3>[email protected]</h3>
<h3>web-7258</h3>
<h3>WEB前端梦之蓝</h3>
</div>
</body>
</html>更多精彩文章，敬请持续关注——WEB前端梦之蓝
用微信扫描下方的二维码可直接关注该公众号哦，或者打开微信公众号搜索 “web-7258”，关注后会在第一时间将最新文章推送给您哦！