如何在css中设置滚动条样式

注意：滚动条设置的width、height，分别是对应纵向滚动条 宽度、横向滚动条 高度，无法修改纵向滚动条高度、横向滚动条宽度数值只介绍Google浏览器滚动条样式，常用属性如下：

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

 注意：滚动条设置的width、height，分别是对应纵向滚动条 宽度、横向滚动条 高度，无法修改纵向滚动条高度、横向滚动条宽度数值

/* 1,滚动条 */
     ::-webkit-scrollbar {
      width: 20px;          /* 纵向滚动条 宽度 */
      height: 15px;         /* 横向滚动条 高度 */
      background: pink;   /* 整体背景 */
      border-radius: 10px;  /* 整体 圆角 */
    }

注意：滚动条两端的按钮也存在上述情况 

/* 2,滚动条两端的按钮 */
    ::-webkit-scrollbar-button{
      width: 30px;          /* 横向滚动条 宽度 */
      height: 20px;          /* 纵向滚动条 高度 */
      background: black;
      border-radius: 10px;
    }