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

在我们深入探索技术新领域的过程中，总会碰到一些意想不到的惊喜，这些新发现挑战着我们原有的认知，并为我们的开发工作开辟了新天地。最近，在审视我所负责的项目时，我注意到了一个小小的但极为关键的改变，这让我不得不重新思考我对于CSS滚动条样式的理解，并深刻感受到了技术进步带来的乐趣。

这个问题起初很简单：我的滚动条与团队其他成员设计的UI风格显得格格不入。经过仔细比较和研究后，我意识到了问题所在——scrollbar-color和scrollbar-width这两个CSS属性。在我经常使用的Chrome浏览器中，这些属性以前是不支持的。但是，随着Chrome浏览器更新到121版本，情况发生了翻天覆地的变化。

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

这个变化不仅意味着我们现在可以使用标准的CSS属性来定制美观的滚动条，而且标志着我们在创造更加统一和互动的用户体验方面向前迈出了一大步。在过去，要在Chrome上实现自定义滚动条效果，我们不得不依赖于::-webkit-*伪选择器，这种做法虽然可以工作，但因其仅在Chrome和Safari上有效，而Firefox不支持，因此其局限性和不一致性一直受到批评。

html {
	overflow: overlay;
	scrollbar-color: #6d7c77 #cfd7c7;
	scrollbar-width: auto;
}

body::-webkit-scrollbar {
	width: 8px;
}

body::-webkit-scrollbar-thumb {
	background: var(--scroll-thumb-color);
	border-radius: 10px;
}

body::-webkit-scrollbar-track {
	background: var(--scroll-track-color);
	border-radius: 10px;
}

在Chrome 121版本之后，继续使用::-webkit-*伪选择器可能会导致样式与预期不符，更多详情可以在Chrome开发者文档中查阅。

为了适应这种变化，我们可以将新的滚动条属性应用于body元素，确保在Chrome中的兼容性，即便是Firefox可能还未完全支持这些属性。

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

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

body::-webkit-scrollbar {
	width: 8px;
}

body::-webkit-scrollbar-thumb {
    background: var(--custom-thumb-color);
    border-radius: 16px;
}

body::-webkit-scrollbar-track {
    background: var(--custom-track-color);
    border-radius: 16px;
}

/* 针对不支持::-webkit-scrollbar-*的浏览器的样式调整 */
@supports not (selector(::-webkit-scrollbar)) {
    html {
        scrollbar-width: auto;
        scrollbar-color: #bbb #bbb;
    }
}

看到这里，还不快快去看看自己项目的滚动条有没有问题

作者：BrittanyZ
链接：https://juejin.cn/post/7330826811491287059