前军教程网

ss3可以自定义滚动条样式，今天发现了一个花式玩法，一起看看？ 之前写过网页时滚动条时是不是都这个样子的呢

这个滚动条好看么？

废话肯定不好看！ 如果设计湿给个带背景的设计图，又当如何呢？

是不是更丑了！

前方高能登场！非战斗人员请火速避开！

请注意第二张图并非滚动条不见了，是设置了与背景色同色，（是不是多此一举了，用户体验去哪了！）

是不是美观了不少？

身为前端老司机，还是得分享些干货精品学习资料的，前端资料获取方式：

关注后，手机客户端点击我的主页面，右上角有私信，请私信回复：【学习】

已经设置好了关键词自动回复，所以回复的时候请注意关键词哟~

css代码奉上

body {
 background: #06b0b9;
}
::-webkit-scrollbar {
 width: 10px;
 height: 1px;
}
::-webkit-scrollbar-thumb {
 border-radius: 10px;
 -webkit-box-shadow: none;
 background: hsl(183, 97%, 27%);
 -webkit-box-shadow: none;
}
::-webkit-scrollbar-track {
 -webkit-box-shadow: none;
 border-radius: 10px;
 background: #06b0b9;
 -webkit-box-shadow: none;
}

查了一下兼容表，兼容性我不说啥了(谷谷大佬)(这个表我都想删了)

更,,,

看官提示,火狐IE不行,亲测火狐确实不行,那丫的不支持,

不过ie支持别的方法实现,不过略显不完美

 body {
 scrollbar-arrow-color: #06b0b9;
 /*三角箭头的颜色*/
 scrollbar-face-color: hsl(183, 97%, 27%);
 /*立体滚动条的颜色（包括箭头部分的背景色）*/
 scrollbar-3dlight-color: #06b0b9;
 /*立体滚动条亮边的颜色*/
 scrollbar-highlight-color: #06b0b9;
 /*滚动条的高亮颜色（左阴影？）*/
 scrollbar-shadow-color: #06b0b9;
 /*立体滚动条阴影的颜色*/
 scrollbar-darkshadow-color: #06b0b9;
 /*立体滚动条外阴影的颜色*/
 scrollbar-track-color: #06b0b9;
 /*立体滚动条背景颜色*/
 scrollbar-base-color: #06b0b9;
 /*滚动条的基色*/
}

不过只有今天还有个发现,似乎可以实现全屏背景图

正常情况下这个样子

别光顾着看人,看右边,这能能满足么?

回归正题

这样是不是好了不少?

body,
html {
 width: 100vw;
}
body {
 /* background: #06b0b9; */
 background: url(01.jpg) no-repeat center;
 background-size: 100% 100%;
}
::-webkit-scrollbar {
 width: 10px;
 height: 1px;
}
::-webkit-scrollbar-thumb {
 border-radius: 10px;
 background: hsl(183, 97%, 27%);
 -webkit-box-shadow: none;
}
::-webkit-scrollbar-track {
 border-radius: 10px;
 background: rgba(0, 0, 0, 0);
 -webkit-box-shadow: none;
}