Chrome：新的滚动捕捉事件助你实现更丝滑的动画效果！

文章预览

大家好，我是 ConardLi 。 从 Chrome 129 开始，我们可以在 JavaScript 中使用 scrollSnapChange 和 scrollSnapChanging 事件，这两个事件可以让我们实现非常棒的滚动动画效果，下面我们一起来学习一下。 注意：本文中的 GIF 都经过压缩，实际的动画效果相当丝滑！ 在 scrollSnapChange 出现之前，如果你想知道哪个元素被快照到了滚动视口里，你可以使用交叉观察器（ Intersection Observer ）来检测。但要确定哪个元素被快照是有局限性的，只有在某些特定情况下才能使用这种方法。 比如说，你可以检测滚动视口（ scroll port ）是否被快照元素填满或者大部分填满。具体做法是，观察滚动区域内哪些元素在相交，然后根据哪个元素占用了大部分的滚动区域，假设这个元素是快照目标。接下来，你再等待 scrollend 事件触发后，对这个被快照的目标元素进行操作。 然而 ………………………………