windows系統中火狐瀏覽器滾動條很粗,且顏色在很多場景很辣眼睛,並不適用,現提供以下幾種方式,對滾動條進行優化:
1.直接隱藏法(體驗最差)
// 火狐64+
scroll-width: none
// 谷歌
::-webkit-scrollbar {
display: none
}
2.引用第三方插件(有弊端)
相關插件推薦
vue-scroll
vue-happy-scroll
better-scroll
由於引用第三方插件後,在mac中瀏覽器自動又添加了優化的滾動條,會重疊,看起來不是很友好
3.css自帶(最方便好用)
主要針對火狐64+
scrollbar-width: thin; // 滾動條窄形式
scrollbar-color: #5A5B5C transparent; // 滾動條顏色 背景顏色
樣式看起來也還不錯