修改默认浏览器滚动条样式

滚动条各个属性：

• ::-webkit-scrollbar ：滚动条整体部分，其中的属性有width,height,background,border等。
• ::-webkit-scrollbar-button ：滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。
• ::-webkit-scrollbar-track ：外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。
• ::-webkit-scrollbar-track-piece ：内层轨道，具体区别看下面gif图，需要注意的就是它会覆盖第三个属性的样式。
• ::-webkit-scrollbar-thumb ：滚动条里面可以拖动的那部分
• ::-webkit-scrollbar-corner ：边角，两个滚动条交汇处
• ::-webkit-resizer ：两个滚动条交汇处用于拖动调整元素大小的小控件（基本用不上）

上面的这些属性只针对chrome内核的浏览器，不兼容火狐（后面会有讲解）.

下面是一些基本的设置：

&::-webkit-scrollbar {
  // 滚动条的背景
  width: 16px;
  height: 14px;
  background: #191a37;
}
 
&::-webkit-scrollbar-track,
&::-webkit-scrollbar-thumb {
  border-radius: 999px;
  width: 20px;
  border: 5px solid transparent;
}
 
&::-webkit-scrollbar-track {
  box-shadow: 1px 1px 5px #191a37 inset;
}
 
&::-webkit-scrollbar-thumb {
  //滚动条的滑块样式修改
  width: 20px;
  min-height: 20px;
  background-clip: content-box;
  box-shadow: 0 0 0 5px #464f70 inset;
}
 
&::-webkit-scrollbar-corner {
  background: #191a37;
}

精简版的亲测好用：

&::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background: transparent;
}
 
&::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 4px;
}
 
&:hover::-webkit-scrollbar-thumb {
  background: hsla(0, 0%, 53%, 0.4);
}
 
&:hover::-webkit-scrollbar-track {
  background: hsla(0, 0%, 53%, 0.1);
}

兼容上面效果的火狐的写法：

．target{
    crollbar-width: thin;
    scrollbar-color: #ffffff #ffffff; // 兼容火狐
    &:hover {
      scrollbar-color: hsla(0, 0%, 53%, 0.4) hsla(0, 0%, 53%, 0.4); // 兼容火狐
    }
}

这里的关键是scrollbar-color设置成容器的颜色对视觉隐藏，然后利用hover效果显示．

参考文章：

https://blog.csdn.net/wxl1555/article/details/78871542