css3可以自定义滚动条样式,今天发现了一个花式玩法,一起看看? 之前写过网页时滚动条时是不是都这个样子的呢 这个滚动条好看么?
废话肯定不好看! 如果设计湿给个带背景的设计图,又当如何呢?
是不是更丑了!
前方高能登场!非战斗人员请火速避开!
请注意第二张图并非滚动条不见了,是设置了与背景色同色,(是不是多此一举了,用户体验去哪了!)
是不是美观了不少?
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;
}
敬请各位看官多多斧正。就是想到一种思路,分享出来,没别的意思,我自认为天资一般,所以诸位师兄中必有武功高强,天资聪慧者,望轻拍砖
今天的文章CSS滚动条样式修改分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/14533.html