大家好，我是 。

从 Chrome 129 开始，我们可以在 JavaScript 中使用 scrollSnapChange 和 scrollSnapChanging 事件，这两个事件可以让我们实现非常棒的滚动动画效果，下面我们一起来学习一下。

注意：本文中的 GIF 都经过压缩，实际的动画效果相当丝滑！

在 scrollSnapChange 出现之前，如果你想知道哪个元素被快照到了滚动视口里，你可以使用交叉观察器（Intersection Observer）来检测。但要确定哪个元素被快照是有局限性的，只有在某些特定情况下才能使用这种方法。

比如说，你可以检测滚动视口（scroll port）是否被快照元素填满或者大部分填满。具体做法是，观察滚动区域内哪些元素在相交，然后根据哪个元素占用了大部分的滚动区域，假设这个元素是快照目标。接下来，你再等待 scrollend 事件触发后，对这个被快照的目标元素进行操作。

然而，在 scrollSnapChanging 出现之前，知道捕捉目标何时改变或者它被改变成什么是不可能的。

好消息是，这些新的事件让我们可以很容易的货渠道这些信息。这使得滚动快照的交互能够突破当前的能力，实现更加广泛的应用，并能够编排滚动快照关系和引入新的用户界面反馈场景。

scrollSnapChange

这个事件只有在滚动手势导致新的快照目标停留时才会触发，并按以下顺序进行：

滚动停止后触发；在 scrollend 之前。

具体来说，这个事件会在滚动完成且捕捉到新的快照目标时，在 scrollend 之前触发。这使得事件看起来像是懒触发或即时触发的，因为它会在滚动手势完成时触发。

scroller.addEventListener('scrollsnapchange', event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
})
scroller.onscrollsnapchange = event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
}

这个事件将捕捉到的快照元素通过事件对象的 snapTargetBlock 和 snapTargetInline 属性暴露出来。如果滚动方向只有水平的，那么 snapTargetBlock 属性会是 null。这些属性的值会是元素节点。

关于 scrollSnapChange 的一些细节：

用户释放手势后才触发：当用户的手指还在屏幕上或者手指还在触控板上时，表示用户的手势还未完成滚动，这意味着滚动还未结束，因此快照目标还未改变，它等待用户手势完全完成后才触发。

如果快照目标未改变，不会触发：这个事件是专为快照变化设计的，如果快照目标没有改变，事件不会触发，即便用户进行了滚动操作。用户确实进行了滚动，所以在滚动完成后仍会触发 scrollend 事件。

scrollSnapChanging

一旦浏览器认为滚动手势已经或将要产生新的抓取目标，该事件就会触发，它会在滚动过程中紧急触发。

scroller.addEventListener('scrollsnapchanging', event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
})
scroller.onscrollsnapchanging = event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
}

这个事件将捕捉到的快照元素通过事件对象的 snapTargetBlock 和 snapTargetInline 属性暴露出来。如果滚动方向只有垂直的，那么 snapTargetInline 属性会是 null。这些属性的值会是元素节点。

关于 scrollSnapChanging 的一些细节：

在滚动手势过程中频繁触发：与 scrollSnapChange 在用户完成整个滚动手势后才触发不同，scrollSnapChanging 在用户用手指或触控板滚动时会频繁且提前触发。假设用户在不抬起手指的情况下慢慢滚动，只要用户在多个潜在的快照目标上方平移，这个事件会在手势过程中多次触发。每次用户滚动时，如果浏览器确定在释放时会停留在新的快照目标上，事件就会触发，告诉你是哪个元素。

不会对所有经过的快照目标触发：考虑一种甩动手势，用户的滚动甩动动作一次性跨越多个快照目标时，这个事件会针对最终停留的目标触发一次。因此，它是积极触发的，但不会过度浪费资源，在你需要时尽早提供快照目标信息。

使用示例

这些事件不仅开启了许多新的使用场景，还使当前的一些动画效果实现起来更加简单。一个明显的例子是启用快照触发动画。在上下文中，当某个元素成为快照目标时，可以展示该元素、其子元素或相关信息。

下面展示了一些使用场景，帮助你立即提高工作效率。