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

标签：滑块   插入   问题   scroll   box   rgba   shadow   track   set   

第一步：你需要在样式<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;）

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

标签：滑块   插入   问题   scroll   box   rgba   shadow   track   set   

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