今天项目上发现了一个奇怪的问题，右侧滚动条突然出现了页面抖动，情况如下图：

由于项目上固定使用 Chrome 浏览器，因此右侧滚动条使用了 "overflow: overlay"，overlay的原本作用应该是让滚动条悬浮在内容之上，滚动条不会占用空间，造成现在这样的抖动情况。

项目没有改动过滚动条效果，所以造成现在问题的原因推测必然是 Chrome 内核的版本变化。

谷歌 Chrome 浏览器，于 5 月 31 日正式推出了 Chrome 114 稳定版更新。查看 Chrome 版本发现自动更新到了最新版本 Chrome 114。

在 Chrome 官网发现，从 Chrome 114 版本开始，已经不再支持 overlay 模式。

原因已经找到，新版的 Chrome 已经按照标准废弃了 overlay，前端开发只有苦逼地按照设计重新实现滚动条效果了。[捂脸]

Chrome 114 为什么 overlay 不再支持了呢？

"overflow: overlay" 的作用原本是让元素的滚动条以一种特殊的方式呈现。当内容发生溢出时，滚动条会覆盖在元素上而不是占据空间。这样可以保持元素的尺寸和布局不变，同时又能够让用户通过滚动条来浏览溢出的内容。

然而，由于该值的实现非常复杂，不同浏览器的行为也表现出了差异。特别是在嵌套的滚动容器中使用时，容易导致布局错乱、滚动条失效等问题。此外，该值的兼容性也比较差，很多浏览器都没有实现该特性或者表现不一致。另外覆盖在元素之上的效果，可能会遮盖页面上其他内容，这可能导致用户体验问题。

总的来说就是，

1、"overflow: overlay" 的行为并不是严格定义的；

2、它在不同浏览器的兼容性也比较差；

3、可能出现布局错乱、滚动条失效、遮盖内容等问题，影响用户体验。

因此，W3C 决定将 "overflow: overlay" 值从规范中删除。Chrome 也从 114 版本正式支持这一标准。

各位前端开发们，如果项目的设计上使用到了 overlay，又可以跟 UI 开始新一轮的极限拉扯了。[捂脸]

对于本文中的内容，不知道你有没有什么看法，欢迎在评论区里留言。如果你对我的文章内容感兴趣，欢迎点击关注，谢谢支持！[谢谢][谢谢][谢谢]