纯CSS样式之非常好用的滚动条样式

我们平时在切片的过程中，某些DIV里面如果想局部加滚动条的话都会非常丑陋。

无耐的时候我们通常都会使用Jquery插件来实现。并且很多时候还面临着兼容问题，总之没有直接使用overflow:scroll用户体验好。

今天给大家推荐一种非常好用的纯CSS的滚动条样式，只需要将下面这段代码加入到你的CSS文件中，就可以随意的在不同的位置使用overflow:scroll了。

显示的效果也非常不错。

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background-color: #ccc;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #f5f5f5;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #c8c8c8;
}

并且还可以通过CSS直接定义颜色哟。

以上是纯CSS样式之非常好用的滚动条样式的详细内容。更多信息请关注PHP中文网其他相关文章！