关于css3:css修改浏览器滚动条样式

一、滚动条相干的属性

::-webkit-scrollbar                 滚动条整体局部，罕用属性：width,height,background,border；
::-webkit-scrollbar-button          滚动条两边的按钮，默认不设置时不显示，可设置高度、背景色、背景图片；
::-webkit-scrollbar-track           整个滚动条去除两边按钮剩下的局部；
::-webkit-scrollbar-track-piece     track去掉拖拽剩下的局部；
::-webkit-scrollbar-thumb           滚动条外面能够拖动的那局部；
::-webkit-scrollbar-corner          边角；
::-webkit-resizer                   定义右下角拖动块的款式

二、根底改变，上例子

<div class="box">
  <div>1fnreknenverknrefnrenfengrnengej1fnreknenverknrefnrenfengrnengejk1fnreknenverknrefnrenfengrnengejk1fnreknenverknrefnrenfengrnengejkk</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
</div>

.box {
  width: 300px;
  height: 100px;
  overflow: scroll;
}
div::-webkit-scrollbar {
  width: 8px; /* 纵向滚动条的宽 */
  height: 8px; /* 横向滚动条的高 */
}
div::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: #EBEBEB;
}

三、成果

注：只对 设置了高度和滚动成果的容器 失效