页面布局中，当内容超出盒子时，为了美观，会将超出的部分设置滚动条效果，有些浏览器默认的滚动条非常的丑，那你知道如何修改滚动条样式吗？这篇文章将会教你怎么设置滚动条样式。
/*作为IT界最前端的技术达人，页面上的每一个元素的样式我们都必须较真，就是滚动条我们也不会忽略。下面我给大家分享一下如何通过CSS来控制滚动条的样式，代码如下：*/ 1 /*定义滚动条轨道*/ #style-2::-webkit-scrollbar-track { background-color: #F5F5F5; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.22); } /*定义滚动条高宽及背景*/ #style-2::-webkit-scrollbar { width: 10px; background-color: rgba(0, 0, 0, 0.34); } /*定义滚动条*/ #style-2::-webkit-scrollbar-thumb { background-color: #8b8b8b; border-radius: 10px; }
要实现单个div里面的内容滚动，需要满足三个条件：
1、div必须设定固定的高度，不能使用百分比或 auto 等弹性值。
2、其中的内容高度必须超过它本身的高度。
3、必须添加属性 “overflow：auto”。
隐藏滚动条：
1、去掉水平方向的滚动条：
2、去掉垂直方向的滚动条：
3、隐藏横向、显示纵向滚动条：
4、隐藏全部滚动条：
或者
更好的方法就是把滚动条的颜色设置为完全透明，这样既可以实现内容的滚动，又达到不显示滚动条的目的。
应用:
没有水平滚动条:
test
没有垂直滚动条
test
没有滚动条
test
自动显示滚动条
test
自己定义滚动条的颜色，代码如下：
Body {scrollbar-arrow-color: #f4ae21; /*三角箭头的颜色*/scrollbar-face-color: #333; /*立体滚动条的颜色*/scrollbar-3dlight-color: #666; /*立体滚动条亮边的颜色*/scrollbar-highlight-color: #666; /*滚动条空白部分的颜色*/scrollbar-shadow-color: #999; /*立体滚动条阴影的颜色*/scrollbar-darkshadow-color: #666; /*立体滚动条强阴影的颜色*/scrollbar-track-color: #666; /*立体滚动条背景颜色*/scrollbar-base-color:#f8f8f8; /*滚动条的基本颜色*/Cursor:url(mouse.cur); /*自定义个性鼠标*/}
以上2项适用与
、
、
以上就是如何修改滚动条的默认样式的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1611992.html
微信扫一扫 
支付宝扫一扫 
