别再用旧方法了！Chrome 121对CSS滚动条样式的影响

在探索前沿技术的旅途中，我们经常会遇到一些令人惊喜的变化，它们不仅挑战我们的既有知识，还为我们的开发实践带来新的可能。最近，在回顾我负责的一个项目时，我发现了一个细微却颇为关键的变化，这不仅令我重新审视了我对CSS滚动条样式的理解，还让我感受到了技术进步的魅力。

问题的起源很简单：相较于同事的UI设计，我的项目中的滚动条看起来有些不协调。经过一番对比和研究，我意识到了问题的所在------scrollbar-color和scrollbar-width，这两个CSS属性，在我长期使用的Chrome浏览器中，曾经是不被支持的。然而，随着Chrome 121版本的更新，这一切都改变了。

css 复制代码

html {
    scrollbar-width: thin;
    scrollbar-color: #aaa #aaa;
}

这个更新不仅意味着我们可以使用标准化的CSS属性来美化滚动条，也标志着我们在创建更一致、更具交互性的用户体验方面迈出了重要一步。过去，为了在Chrome上实现自定义滚动条，我们不得不依赖::-webkit-*伪选择器，这一方法虽然有效，却因其局限性（仅在Chrome和Safari上支持）和不一致性（Firefox不支持）而备受诟病。

css 复制代码

html {
    scrollbar-width: thin;
    scrollbar-color: #6d7c77 #cfd7c7;
}

body::-webkit-scrollbar {
    width: 0.5rem;
}

body::-webkit-scrollbar-thumb {
    background-color: var(--tertiary-color);
    border-radius: 0.7rem;
}

body::-webkit-scrollbar-track {
    background-color: var(--primary-color);
    border-radius: 0.7rem;
}

在Chrome 121的世界里，沿用旧有的::-webkit-*伪选择器写法会导致样式不符合我们的预期，详细参考资料可以在Chrome开发者文档中找到。

面对这样的变化，我们可以采取的一种策略是，将新的滚动条属性应用于body元素，以保证在Chrome中的兼容性，虽然Firefox对此似乎还不支持。

css 复制代码

body {
    scrollbar-width: thin;
    scrollbar-color: #aaa #aaa;
}

通过查询资料，我发现Chrome团队最近发布的博客文章详细介绍了这一变更。这篇文章不仅提供了一个深入了解滚动条样式如何受操作系统影响的机会，还为我们提供了一个快速修复方法：针对不支持::-webkit-*伪选择器的浏览器，我们可以通过添加一个@supports规则来检查并应用新的滚动条属性。

css 复制代码

body::-webkit-scrollbar {
    width: 0.5rem;
}

body::-webkit-scrollbar-thumb {
    background-color: var(--tertiary-color);
    border-radius: 1rem;
}

body::-webkit-scrollbar-track {
    background-color: var(--primary-color);
    border-radius: 1rem;
}

/* 不支持`::-webkit-scrollbar-*`的浏览器 */
@supports not selector(::-webkit-scrollbar) {
    html {
        scrollbar-width: thin;
        scrollbar-color: #aaa #aaa;
    }
}

个人偏好可能让我依旧钟情于::-webkit-*伪选择器，CSS规范的进步和标准化告诉我们，探索和适应标准属性的重要性。虽然历史上的选择可能被视为一种错误，但正是这些探索和变革，推动了我们向前发展，向着更优、更一致的用户体验迈进。

这次的经历不仅仅是关于技术的更新，更是一个关于持续学习、适应变化的故事。在追求完美的用户体验道路上，我们应该始终保持好奇心，探索最新的技术，同时也要有选择地采用那些真正适合我们项目的解决方案。