浏览器滚动条

css设置滚动条的样式

注意： 滚动条设置的width、height，分别是对应纵向滚动条 宽度、横向滚动条 高度，无法修改纵向滚动条高度、横向滚动条宽度数值。数值与外侧内容和内层宽高比有关，值越大滚动条越长

Google浏览器滚动条样式，常用属性如下：

::-webkit-scrollbar	滚动条整体样式
::-webkit-scrollbar-button	一设置滚动条样式，滚动条两端的按钮图标就消失，但可以重新设置图片、新样式
::-webkit-scrollbar-track	外层轨道
::-webkit-scrollbar-track-piece	内层轨道，它会覆盖外层轨道 scrollbar-track 的样式
::-webkit-scrollbar-thumb	滑块
::-webkit-scrollbar-corner	边角，两个滚动条交汇处

问题点：无法设置webkit-scrollbar-thumb的宽度

解决：

::-webkit-scrollbar-thumb {
    background-color: #818B99;
    border: 3px solid transparent;
    border-radius: 9px;
    background-clip: content-box;
}

demo

**
 *滚动条整体部分，可以设置宽度啥的
 *横向的修改高度，纵向的修改宽度
 */
::-webkit-scrollbar {
    width: 12px !important;
    height: 12px !important;
}

/**
   *滚动的滑块
   *滚动条里面可以拖动的那部分
   */
::-webkit-scrollbar-thumb {
    opacity: 0.8;
    background: #d1d8e6;
    border-radius: 19px;
    height: 30px !important;
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: #a5b3cf;
    border: 2px solid transparent;
    background-clip: content-box;
}

/**
  * 内层轨道，滚动条中间部分
   */
::-webkit-scrollbar-track-piece {
    background: #f1f6fe;
    width: 30px;
    height: 30px;
}

/**
   *滚动条两端的按钮，可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果
  */
::-webkit-scrollbar-button {
    display: none;
}

/**
    * 边角，就是滚动条右下角的小方块
   */
::-webkit-scrollbar-corner {
    display: none;
}

效果