Chrome 在 121 版本开始,原生支持了两个滚动条样式相关的样式 scrollbar-color 和 scrollbar-width。 要知道,在此前,虽然有::-webkit-scrollbar规范可以控制滚动条,可是,::-webkit-scrollbar是非标准特性,在 MDN 文档中都明确了不应该在生产环境使用它。 MDN - ::-webkit-scrollbar Non-standard: This feature...
scrollbar-width: auto:系统默认的滚动条宽度。 scrollbar-width: thin:系统提供的瘦滚动条宽度,或者比默认滚动条宽度更窄的宽度 scrollbar-width: none:不显示滚动条,但是该元素依然可以滚动 简单示意图如下: 完整的 DEMO,你可以戳这里:CodePen Demo -- Scrollbar-width Demo 总结一下 可以看到,其实就目前scroll...
scrollbar-width: thin; scrollbar-width: none; } scrollbar-width: auto:系统默认的滚动条宽度。 scrollbar-width: thin:系统提供的瘦滚动条宽度,或者比默认滚动条宽度更窄的宽度 scrollbar-width: none:不显示滚动条,但是该元素依然可以滚动 简单示意图如下: 完整的 DEMO,你可以戳这里:CodePen Demo -- Scr...
scrollbar-width: auto:系统默认的滚动条宽度。 scrollbar-width: thin:系统提供的瘦滚动条宽度,或者比默认滚动条宽度更窄的宽度 scrollbar-width: none:不显示滚动条,但是该元素依然可以滚动 简单示意图如下: 完整的 DEMO,你可以戳这里:CodePen Demo -- Scrollbar-width Demo 总结一下 可以看到,其实就目前scroll...
scrollbar-width设置滚动条粗细 了解完scrollbar-color后,我们再来看看scrollbar-width。这个从名字也很好理解,设置滚动条的宽度。 那是否和我们想象的一样,可以任意设置滚动条的宽度,甚至乎,可以定制化的设置滑块和轨道的宽度? 遗憾的是,在CSS Scrollbars Styling Module Level 1一期滚动条规范中,这个属性的功能被设置...
scrollbar-width设置滚动条粗细 了解完scrollbar-color后,我们再来看看scrollbar-width。这个从名字也很好理解,设置滚动条的宽度。 那是否和我们想象的一样,可以任意设置滚动条的宽度,甚至乎,可以定制化的设置滑块和轨道的宽度? 遗憾的是,在CSS Scrollbars Styling Module Level 1一期滚动条规范中,这个属性的功能被设置...
scrollbar-width: auto:系统默认的滚动条宽度。 scrollbar-width: thin:系统提供的瘦滚动条宽度,或者比默认滚动条宽度更窄的宽度 scrollbar-width: none:不显示滚动条,但是该元素依然可以滚动 简单示意图如下: 完整的 DEMO,你可以戳这里:CodePen Demo -- Scrollbar-width Demo ...
scrollbar-color: unset; JS实现(跨浏览器支持) 使用JS库,例如:simplebar。 另外,Das Surma 提供了一种 custom scrollbar(CSS Deep-Dive: matrix3d() For a Frame-Perfect Custom Scrollbar),使用 CSS矩阵 构建滚动条,JS 不用来实现滚动功能(有助于性能),而是用于设置 CSS。
这里写了个示例:https://codepen.io/pantao/pen...参考资料可以看:https://developer.mozilla.org...你自己可以通过 CSS 强制将所有的 Scrollbar 统一样式化的,虽然最终效果可能还是会有些许不一致,但是就以前的使用经验来看,基本是可以做到很接近的。
CodePen Embed Fallback As you can see, we don’t have to go nuts when it comes to scrollbar styling. Sometimes a subtle change is all it takes to enhance the overall user experience with a scrollbar that matches the overall theme. ...