很多朋友，会觉得默认的css滚动条样式是很丑的吧，稍微改下-webkit-scrollbar（滚动条整体样式）、-webkit-scrollbar-thumb（滚动条里面小方块样式）、-we
很多朋友，会觉得默认的css滚动条样式是很丑的吧，稍微改下-webkit-scrollbar（滚动条整体样式）、-webkit-scrollbar-thumb（滚动条里面小方块样式）、-webkit-scrollbar-track（滚动条里面轨道样式）就ok了，要改什么样的就改什么样的css滚动条。
改默认css滚动条样式，例子代码如下：
<!Doctype html><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"/><title>css滚动条样式</title><style type="text/css">.box{width: 600px;height: 400px;margin: 100px auto;border: 1px solid #000;border-right: 0;}.main{overflow-x: hidden;overflow-y: auto;color: #000;font-size: 16px;height: 100%;}.main p{height:300px;}/*-------滚动条整体样式----*/.main::-webkit-scrollbar {width:8px;height:8px;}/*滚动条里面小方块样式*/.main::-webkit-scrollbar-thumb {border-radius:100px;-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);background:red;}/*滚动条里面轨道样式*/.main::-webkit-scrollbar-track {-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);border-radius:0;background:rgba(0,0,0,0.1);}</style></head><body><div class="box"><div class="main"><p>内容1</p><p>内容2</p><p>内容3</p></div></div></body></html>效果图：
特别注意：实现单个div里面的内容滚动，必需满足以下3个条件：
1、div必须设定固定的高度，不能使用百分比或 auto 等弹性值；
2、其中的内容高度必须超过它本身的高度；
3、必需要添加这个overflow:auto属性。
附：overflow的属性和不同值得作用
1.overflow:visible;不剪切内容也不添加滚动条。默认值。使用该值时，无论设置的"width"和"height"的值是多少，其中的内容无论是否超出范围都将被强制显示;
2.overflow:auto;在需要时剪切内容并添加滚动条;
3.overflow:hidden;不显示超过对象高度的内容;
4.overflow:scroll;总是显示纵向滚动条;
5.overflow 水平及垂直方向内容溢出时的设置;
6.overflow-x 水平方向内容溢出时的设置;
7.overflow-y 垂直方向内容溢出时的设置。
本站部分文章来自网络或用户投稿，如无特殊说明或标注，均为本站原创发布。涉及资源下载的，本站旨在共享仅供大家学习与参考，如您想商用请获取官网版权，如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。