欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-03-05 08:17:41
...

滚动条各个属性:

  • ::-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