滚动条

浏览器滚动条

    ::-webkit-scrollbar              { /* 1 */ }
    ::-webkit-scrollbar-button       { /* 2 */ }
    ::-webkit-scrollbar-track        { /* 3 */ }
    ::-webkit-scrollbar-track-piece  { /* 4 */ }
    ::-webkit-scrollbar-thumb        { /* 5 */ }
    ::-webkit-scrollbar-corner       { /* 6 */ }
    ::-webkit-resizer                { /* 7 */ }

滚动条的默认样式

image.png

css对应着上图的滚动条的图实

• ::-webkit-scrollbar 滚动条整体部分，支持属性有宽度和高度 background border 如一个块元素
• ::-webkit-scrollbar-button 滚动条两端的按钮，支持背景，可以让起不现实
• ::-webkit-scrollbar-track 外层轨道，可以用display： none 让其不显示，也可以添加背景图片，颜色改变显示效果
• ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分除去
• ::-webkit-scrollbar-thumb 滚动条里面可以拖动的那部分
• ::-webkit-scrollbar-corner 边角
• ::-webkit-resizer 定义右下角拖动块的样式

我们这边默认的样式风格

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

::-webkit-scrollbar-track {
  background-color: #efefef;
}

::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background-color: rgba(0, 0, 0, .35);
}