windows系统中火狐浏览器滚动条很粗,且颜色在很多场景很辣眼睛,并不适用,现提供以下几种方式,对滚动条进行优化:

1.直接隐藏法(体验最差)

// 火狐64+
scroll-width: none
// 谷歌
::-webkit-scrollbar {
display: none
}

2.引用第三方插件(有弊端)

相关插件推荐
el-scrollbar(element自带的,但是没有在文档中写出)
vue-scroll
vue-happy-scroll
better-scroll
由于引用第三方插件后,在mac中浏览器自动又添加了优化的滚动条,会重叠,看起来不是很友好

3.css自带(最方便好用)

主要针对火狐64+

scrollbar-width: thin; // 滚动条窄形式
scrollbar-color: #5A5B5C transparent; // 滚动条颜色 背景颜色

样式看起来也还不错
clipboard.png


chidaozhi
60 声望4 粉丝

前端老阿姨