CSS自定义滚动条

此改动仅适用于webkit浏览器和火狐，想写ie的，另外再搜吧（搜个毛线，正经人谁写_）
通过自定义可以实现滚动条的样式改动，支持悬浮放大等。 关于滚动条的介绍，详见::-webkit-scrollbar
当然，通过隐藏滚动条，使用标签来模拟滚动条可以做到更好的效果。
这里是scss写的，道理就是这么个道理，有需要的话，改成less、css之类的一样用

// 这里把element-ui的样式过滤掉了
$bar-width: 6px;
$bar-height: 8px;
$bar-hover-width: .8rem;
$bar-hover-height: 1rem;
$track-bg: #0000;
$track-hover-bg: #0000;
$thumb-bg: rgba(223, 223, 223, .6);
$thumb-hover-bg: rgba(221, 221, 221, 1);
*:not(.scrollbar-wrapper){
  // webkit
  // 滚动条
  ::-webkit-scrollbar{
    width: $bar-width;
    height: $bar-height
  }
  // 滚动轨道
  ::-webkit-scrollbar-track{
    background-color: $track-bg;
  }
  // 用来拖动的那个东东
  ::-webkit-scrollbar-thumb{
    background-color: $thumb-bg;
    border-radius: $bar-width / 2;
  }
  &:hover{
    &::-webkit-scrollbar{
      width: $bar-hover-width;
      height: $bar-hover-height;
    }

    &::-webkit-scrollbar-track{
      background-color: $track-hover-bg;
    }

    &::-webkit-scrollbar-thumb{
      border-radius: $bar-hover-width / 2;
      background-color: $thumb-hover-bg;
    }
  }
  // 火狐
  scrollbar-width: thin;
  scrollbar-color: $thumb-bg $track-bg; // 前景色，背景色
  &:hover{
    scrollbar-width: thin;
    scrollbar-color: $thumb-hover-bg $track-hover-bg; // 前景色，背景色
  }
}

转载请注明出处@https://www.cnblogs.com/noah227/p/15598033.html