滚动条样式优化

• 谷歌、Edge

  // 设置滚动条的样式
  ::-webkit-scrollbar {
    width: 30px;
    height: 30px;
    background-color: rgba(red, .3);
  }
  
  // 滚动条两端按钮
  ::-webkit-scrollbar-button {
    background: green;
    border: 3px solid blue;
  }
  
  ::-webkit-scrollbar-button:active {
    background: blue;
    border: 3px solid green;
  }
  
  ::-webkit-scrollbar:hover {
    background-color: #eee;
  }
  
  // 滚动槽外层轨道
  ::-webkit-scrollbar-track {
    width: 5px;
    height: 5px;
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: rgba(green, .1);
  }
  
  // 内层滚动槽
  ::-webkit-scrollbar-track-piece {
    background-color: rgba(skyblue, .3);
  }
  
  // 滚动条滑块
  ::-webkit-scrollbar-thumb {
    border-radius: 15px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: rgba(yellow, .8);
  }
  
  // 边角相交处
  ::-webkit-scrollbar-corner {
    background-color: #000;
    border-radius: 50%;
  }
  
  // 定义右下角拖动块样式
  ::-webkit-resizer {}
  

• Firefox

  scrollbar-color: auto; /* 使用浏览器默认的滚动条样式 */
  scrollbar-color: dark; /* 使用浏览器默认的深色或者黑色滚动效果 */
  scrollbar-color: light; /* 使用浏览器默认的浅色滚动效果 */
  scrollbar-color: red #00f; /* 第一个颜色为滚动条的颜色， 第二个颜色为滚动条轨道的颜色 */
  
  scrollbar-width: auto; /* 使用浏览器默认的滚动宽度 */
  scrollbar-width: thin; /* 设置比默认滚动条宽度更窄的宽度 */
  scrollbar-width: none; /* 隐藏滚动条，但是元素还是可以滚动 */
  scrollbar-width: 66px; /* 直接设置滚动条的宽度，比如 60px 3vh 4wh 5rem 6rm 等长度 */