您的位置：首页 > Web前端 > CSS

修改浏览器滚动条样式

2016-07-13 16:02 477 查看

因工作需要，需要对页面的滚动条进行修改。因此查阅了了一大堆文章，终于尝试成功了。如图

html代码如下

<div class="body">
<ul class="sel-zone">
<li><a href="javascript:;">初恋未满</a></li>
<li><a href="javascript:;">初恋未满</a></li>
<li><a href="javascript:;">初恋未满</a></li>
<li><a href="javascript:;">初恋未满</a></li>
<li><a href="javascript:;">初恋未满</a></li>
<li><a href="javascript:;">初恋未满</a></li>
<li><a href="javascript:;">初恋未满</a></li>
<li><a href="javascript:;">初恋未满</a></li>
<li><a href="javascript:;">初恋未满</a></li>
<li><a href="javascript:;">初恋未满</a></li>
<li><a href="javascript:;">初恋未满</a></li>
</ul>
</div>

css

.sel-zone{width: 90%;height: 286px;margin: 0 auto;overflow-y: auto;}
.sel-zone::-webkit-scrollbar{background: url(../img/slide-bg.png) no-repeat top center;}
.sel-zone::-webkit-scrollbar-thumb{background: url(../img/slide-thumb.png) no-repeat top center/auto 100%;}
.sel-zone::-webkit-scrollbar-button:start{background: url(../img/slide-up.png) no-repeat top center/auto 100%;display: block;}
.sel-zone::-webkit-scrollbar-button:end{background: url(../img/slide-down.png) no-repeat top center/auto 100%;display: block;}
/*隐藏滚动条上方的渐增按钮*/
.sel-zone::-webkit-scrollbar-button:vertical:start:increment,::-webkit-scrollbar-button:vertical:end:decrement {display: none;}

附上原文地址：
http://www.xuanfengge.com/css3-webkit-scrollbar.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css 滚动条样式

相关文章推荐

新的分享

章节导航