纯css美化滚动条样式 -webkit-scrollbar
滚动条对大家来说并不陌生,在日常前端开发中经常会遇到,如果我们用的是原汁原味的浏览器默认的样式,那将是对于我们美好的网页一个致命的打击,网页的颜值也会大打折扣的,所以这就导致我们在做web前端开发的时候,对滚动条的美化迫在眉睫,这也是今天为大家整理的内容。
那webkit浏览器是如何自定义滚动条的呢?
Webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式。当然,兼容所有浏览器的滚动条样式目前是不存在的。
::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-thumb 滚动条里面的小方块,能上下左右移动(取决于是垂直还是水平) ::-webkit-scrollbar-track 滚动条的轨道(里面装有thumb) ::-webkit-scrollbar-button 滚动条轨道两端的按钮,允许通过点击微调小方块的位置 ::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去) ::-webkit-scrollbar-corner 边角,及两个滚动条的交汇处 ::-webkit-resizer 两个滚动条的交汇处上用于拖动调整元素大小的小控件
改变浏览器默认的滚动条样式:
::-webkit-scrollbar-track-piece { //滚动条凹槽的颜色,还可以设置边框属性 background-color:#f8f8f8; } ::-webkit-scrollbar {//滚动条的宽度 width:9px; height:9px; } ::-webkit-scrollbar-thumb {//滚动条的设置 background-color:#dddddd; background-clip:padding-box; min-height:28px; } ::-webkit-scrollbar-thumb:hover { background-color:#bbb; }
当然有的小伙伴也想给特定的div模块修改滚动条的样式,也是so easy,比如我们给class名为test的添加滚动条样式
.test::-webkit-scrollbar { width: 8px; } .test::-webkit-scrollbar-track { background-color:red; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius:2em; } .test::-webkit-scrollbar-thumb { background-color:green; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius:2em; }
当然现在网上也有很多前端技术大牛制作的有关滚动条优化插件,都是很不错的,如果你想省事大家可以搜罗一下,如果你想做自己的网页滚动条风格,那你还是自己学习一下吧。以上就是今天关于滚动条的优化代码内容,希望对你有帮助,时间仓促,如果大家有什么问题,下方欢迎留言指正。
1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » 纯css美化滚动条样式 -webkit-scrollbar
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » 纯css美化滚动条样式 -webkit-scrollbar
很实用
谢谢