我第一次被一个简单的滚动条惊艳到是在这个网站上。当 CSS-Tricks v17 发布 时，它带上了一个又大又胖的滚动条，我当时下巴都快掉了。
我不知道在一个专业的网站上可以做到那样。而且它看起来还…不错？
我非常喜欢它——柔和的渐变、大胆的圆角、混合的背景、令人满意的粗壮，它鼓励你点击并上下滑动它，只为欣赏它触觉上的分量。多么大胆！多么前卫！多么纯粹、易懂、优雅地退化的快乐！
当然，因为乐趣不会持久，当前的 CSS Tricks 滚动条更加成熟和柔和，在黑色背景上使用浅灰色。依然保持品牌风格，依然展现微妙的渐变肌肉，但不会过于分散注意力，影响阅读体验。在我们这个以 MVP 和 80/20 规则为中心的极度功能化的世界里，为了最大限度地提高效率和黑客生产力，自定义滚动条展现出工艺方面的某种东西。它用无声的方式表达了你无法用一百句话表达的含义。
感谢 一些标准化（更多标准即将到来），API 非常简单：七个伪元素和十一个伪类，几乎可以针对可靠（并且经常被忽视）的滚动条的每个可想而知的组件和状态。听起来很多，但你只需使用其中的三个就可以走得很远。
body::-webkit-scrollbar {
/* required - the "base" of the bar - mostly for setting width */
}
body::-webkit-scrollbar-track {
/* the "track" of the bar - great for customizing "background" colors */
}
body::-webkit-scrollbar-thumb {
/* the actual draggable element, the star of the show! */
}从这里开始，它的工作原理就像任何其他选定的元素一样，所以带上你所有的 单div CSS 技巧！媒体查询有效！背景渐变有效！透明度有效！带有各种 CSS 单位的边距都有效！（并非所有内容都有效…我希望可以为我的滚动条设置cursor，以获得真正的 GeoCities 风格）。我在我的网站上试过，使用了 Lea Verou 的 CSS 背景渐变（我的存货在这里），最终得到一个糟糕的组合，拇指元素是条纹状的理发师杆（💈），轨道是透明的心形。但它绝对是我的——以至于当我为工作实施一个 更微妙的版本 时，人们开始称它为“swyxbar”。
每个前端开发人员都应该至少在他们的职业生涯中过一次火。 活得精彩！ 打破规则！ 反抗用户代理！ 也许不要在面向大众的产品中发布会破坏用户期望的滚动条（就像 Google Wave 当年那样）！
据我所知，Firefox 不支持这个，但他们支持一个非常旧的 IE 标准，你可以用它作为变通方法。有点不寻常！
据我所知，Firefox 实际上只支持自定义滚动条的 NEW 标准化属性。
https://css-tricks.cn/the-current-state-of-styling-scrollbars/#an-updated-version-of-a-fairly-consistently-styled-scrollbar-across-firefox-safari-chrome
或者甚至可以使用一些花哨的 JavaScript 滚动条：https://grsmto.github.io/simplebar/
我创建了一个 CSS 组件，可以创建跨浏览器的版本 https://fylgja.dev/components/scrollbar/，直到 iOS 放弃了
::-webkit-scrollbar支持。有趣的是，许多浏览器仍然使用 webkit 版本，但我希望更多浏览器支持较新的规范。
我们又回到了 IE6 和每个客户都要求的自定义滚动条样式，那是在 2000 年代…而且那是一个糟糕的决定。
哦，所以因为过去某个东西执行得很糟糕就意味着它在未来就不能有用或整洁？我相信更新的 CSS 功能能够制作出很棒的自定义滚动条，因为文章中提到的所有原因（例如，“粗壮”实际上可以使它更容易控制）。完全放弃这个想法可能是对正确项目的错失良机。
当时社区的答案（xhtml1.0 横幅启用了开源社区，那是 web2.0 之前…是的，我那么老）是：为什么要重新做 3 个不同的 UI 设计分支已经完善的东西？
是的，但再次强调，那时是那时（我也是那么老），现在是现在。我们现在拥有更有效地执行此操作的工具。按照这种逻辑，我们可能根本不应该覆盖 UA 样式。
我只是指出这一点已经被解决了。不要误会我的意思。
我喜欢这个想法，我现在正在尝试。
我只是太怀旧了。
（我甚至可以将这与我在 Flash 中的早期时光联系起来，那时候我还在制作滚动条..)
我完全理解！一定要分享你的作品——我非常想看看。