CSS的滚动条样式
css学了太久了;都快忘了,唉~
先上效果图吧
这里有一个滚动条
用原生的css写挺简单的
.scroll {
overflow-x: hidden; // X轴的
overflow-y: auto; // Y轴的
}
但是,就是有点…;一言难尽的味道
这是什么****滚动条啊
让我加点样式啊
.scroll::-webkit-scrollbar { /* 滚动条宽、高 */
width: 6px;
}
.scroll::-webkit-scrollbar-thumb { /* 滚动条 拖动条 */
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px #ADAD9D;
background: #ADAD9D;
}
.scroll::-webkit-scrollbar-track { /* 滚动条背景槽 */
-webkit-box-shadow: inset 0 0 5px #ADAD9D;
border-radius: 10px;
background: #E6E1D1;
}
效果图就是这样啦
这里没做兼容,仅仅只是谷歌内核的;我查了很多资料;火狐和IE,他不能自定义滚动条的形式;但是可以改变各种color样式;查到的都是建议隐藏起来;或者自己重写一个滚动条;毕竟粗粗大大的滚动条嵌到内部就真的有点影响布局了
如果大家有什么关于兼容多浏览器滚动条的文章或者是本文章哪里有问题都可以在评论区留言;不喜勿喷,嘻嘻!
参考了以下两篇文章:
小天地,大世界
CSS 滚动条样式【兼容chrome、Firefox、IE】