由于项目上使用的是Chrome浏览器,因此右侧的滚动条使用了‘overflow: Overlay’。覆盖层最初的作用是让滚动条悬浮在内容之上。滚动条不会占用空间,造成当前的抖动情况。

项目并没有改变滚动条效果,所以当前问题的原因肯定是Chrome内核的版本变更。

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

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

原因已经找到了。新版Chrome按照标准已经放弃了overlay,前端开发者要努力按照设计重新实现滚动条效果。 [捂脸]

Chrome 114正式版发布,不再支持叠加效果。前端开发要早做准备!

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

‘overflow: Overlay’的功能原本是为了让元素的滚动条以特殊的方式出现。当内容溢出时,滚动条会覆盖元素而不是占用空间。这保持了元素的大小和布局,同时允许用户使用滚动条导航溢出的内容。

然而,由于实现该值的复杂性,不同的浏览器表现出不同的行为。尤其是在嵌套滚动容器中使用时,很容易导致布局混乱、滚动条失效等问题。另外,这个值的兼容性也比较差。许多浏览器没有实现此功能或行为不一致。另外,覆盖某个元素的效果可能会覆盖页面的其他内容,这可能会导致用户体验问题。

一般来说,

1、‘overflow: Overlay’的行为没有严格定义;

Chrome 114正式版发布,不再支持叠加效果。前端开发要早做准备!

2、对不同浏览器的兼容性也比较差;

3、可能会出现布局混乱、滚动条失效、内容覆盖等问题,影响用户体验。

因此,W3C 决定从规范中删除“overflow: Overlay”值。 Chrome 从版本114 开始也正式支持该标准。

亲爱的前端开发者们,如果在项目的设计中使用了Overlay,就可以和UI开始新一轮的极限推送了。 [捂脸]

用户评论

一笑傾城゛

Chrome 114更新啦,听说不再支持叠加效果,这可怎么办啊?前端开发工作会不会变得复杂多了?

    有6位网友表示赞同!

如你所愿

更新太快了,Chrome 114一来就不支持叠加效果了,前端开发者们得赶紧更新技能树啊!

    有20位网友表示赞同!

娇眉恨

叠加效果一直是我的最爱,现在Chrome不支持了,感觉好失落啊。

    有11位网友表示赞同!

念安я

Chrome 114正式版发布,不支持叠加效果了?这对于那些追求视觉效果的前端来说,是个不小的打击。

    有14位网友表示赞同!

余笙南吟

早知道就不升级Chrome了,现在不支持叠加效果,项目得重新调整。

    有20位网友表示赞同!

猫腻

哈哈,前端开发者又有新挑战了!Chrome 114不支持叠加效果,看来得学学新的技巧了。

    有19位网友表示赞同!

最怕挣扎

Chrome 114这个更新太突然了,我都没来得及准备,现在项目要怎么改啊?

    有5位网友表示赞同!

♂你那刺眼的温柔

叠加效果是个好东西,可惜Chrome不再支持了,希望其他浏览器能接棒。

    有14位网友表示赞同!

月下独酌

Chrome 114不支持叠加效果,这让我想起了那个“不破不立”的道理,前端开发者们要加油了!

    有5位网友表示赞同!

搞搞嗎妹妹

新版本Chrome不支持叠加效果,这让我对前端开发有了新的期待,希望未来的技术能带来更多惊喜。

    有6位网友表示赞同!

醉婉笙歌

Chrome 114不支持叠加效果,我猜这会推动前端技术的发展,让我们看到更多创新。

    有13位网友表示赞同!

你是梦遥不可及

前端开发者要注意了,Chrome 114不再支持叠加效果,你们准备好了吗?

    有11位网友表示赞同!

无望的后半生

这个更新让我有点沮丧,叠加效果那么好看,现在不能用了,有点难过。

    有6位网友表示赞同!

■□丶一切都无所谓

Chrome 114不支持叠加效果,这是在逼我们学习新技能啊!前端开发者加油,一起迎接挑战吧!

    有16位网友表示赞同!

夜晟洛

Chrome 114更新,不支持叠加效果,这是要让我们回到过去吗?前端开发是不是要回到CSS的时代了?

    有8位网友表示赞同!

回忆未来

前端开发者们,Chrome 114更新了,我们要早做准备,迎接新的挑战吧!

    有13位网友表示赞同!

该用户已上天

不支持叠加效果了?Chrome 114这个更新有点让人措手不及,我们要怎么应对呢?

    有16位网友表示赞同!

孤廖

Chrome 114正式版发布,不再支持叠加效果,前端开发的朋友们,你们准备好迎接这个变化了吗?

    有15位网友表示赞同!

如梦初醒

叠加效果不再支持,Chrome 114的更新让我感到有些迷茫,不知道接下来该往哪个方向发展。

    有14位网友表示赞同!

颓废i

Chrome 114不支持叠加效果,这是要让我们重新审视前端设计了吗?希望未来的设计能更上一层楼!

    有11位网友表示赞同!

标签: