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;
}

三、效果

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