首页 > 其他 > 详细

几行代码轻松解决滚动条样式问题

时间:2017-11-14 12:42:43      阅读:239      评论:0      收藏:0      [点我收藏+]

第一步:你需要在样式<style></style>标签中插入如下代码

/* 设置滚动条的样式 */

::-webkit-scrollbar {
width: 5px;
height: 5px;
}

/* 滚动槽 */

::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 5px;
}

/* 滚动条滑块 */

::-webkit-scrollbar-thumb {
border-radius: 10px;
background: rgba(0, 0, 0, 0.1);
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

第二步:给容器加样式

overflow:auto;(或者overflow-y:auto;或者overflow-x:auto;)

几行代码轻松解决滚动条样式问题

原文:http://www.cnblogs.com/Loveonely/p/7831555.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!