HTML & CSS – Styling Scrollbar
前言
Scrollbar 能 styling 的东西不多 (尤其是 IOS 基本上只能 display:none 而已),但有时候我们不得不 styling。
这里记入我自己在项目中修改过的 scrollbar 经历。
参考
例子
Gmail Scrollbar
Gmail 的 scrollbar 就改过 style (为了美观)。
size, color, border-radius 这几个地方都改过。
Ads Scrollbar
像这种可以 sticky vertical 的 scrollbar 是模拟出来的,但是它需要把 native scrollbar hide 起来,而且不可以使用 overflow hidden,因为虽然 scrollbar 要 hide 但是 touch move scroll 功能是要保留的,
所以只能通过 styling 的方式去 hide。
Styling Webkit Scrollbar (not Firefox, not IOS)
Chrome, Edge 会比较可以 styling scrollbar。FireFox,IOS 几乎不支持。
::webkit-scrollbar
.container { &::-webkit-scrollbar { height: 4px; // for vertical scrollbar width: 4px; // for horizontal scrollbar background-color: red; // for both } }
修改 size, color。
它是透过伪元素 (pseudo-elements) 选择器来实现的,这也意味着我们无法透过 JS 来 styling scrollbar。
效果
红色的部分就是 scrollbar area。
也可以搭配 hover 才换颜色
.container { &::-webkit-scrollbar { background: transparent; } &::-webkit-scrollbar:hover { background: red; } }
效果
如果想 hide scrollbar 可以设置 width 或 height = 0
::-webkit-scrollbar-thumb
.container { &::-webkit-scrollbar-thumb { border-radius: 999px; } &::-webkit-scrollbar-thumb:vertical { background-color: blue; } &::-webkit-scrollbar-thumb:horizontal { background-color: green; } }
thumb 指的是我们拉动的区域,修改了 color 和 border-radius
提醒:那个 vertical 和 horizontal 伪类 (pseudo-classes) 选择器在 ::webkit-scrollbar 是不支持的哦。
效果
::-webkit-scrollbar-button
.container { &::-webkit-scrollbar-button:horizontal { background-color: purple; } }
效果
Styling Firefox Scrollbar
Firefox 非常局限
.container { scrollbar-color: red orange; // first for thumb, second for track scrollbar-width: thin; // 只能选 auto, thin, none }
只能改 size 和 color,而且 size 只能选 auto, thin, none。
效果
这 2 个属性,Chrome 和 Edge 也支持,但 Safari 不支持。
Styling IOS Scrollbar
IOS 只支持下面这句
.container { &::-webkit-scrollbar { display: none; } }
只能 display: none 其它都不支持。
总结
我个人的 Best Practice 是,只有 Chrome 和 Edge 可以 styling for 美观以外,Firefox 和 Safari 只能 styling for hide scrollbar。