从 Chrome 129 开始，您可以使用 JavaScript 中的 scrollSnapChange 和 scrollSnapChanging 事件。通过实现内置贴靠事件，之前不可见的贴靠状态会在适当的时间变为可操作，并且始终正确。如果没有这些事件，您的便利性就会大打折扣。
在 scrollSnapChange 之前，您可以使用 Intersection Observer 来查找越过滚动端口的元素，但确定被贴靠的内容仅限于几种情况。例如，您可以检测贴靠项是填满滚动端口，还是填满滚动端口的大部分。为此，您需要观察滚动区域的相交元素，然后根据哪个项占用了大部分滚动区域，假定这是贴靠目标，然后等待 scrollend 并对贴靠的项目（贴靠目标）执行操作。
不过，在 scrollSnapChanging 推出之前，您无法知道贴靠目标何时发生变化或会发生变化（例如在发生滚动快速滑动时）。
显示的水平滚动条作为贴靠目标，内部带有编号框。左侧是 scrollSnapChange 事件的实时日志，以蓝色突出显示 SnapTargetInline。右侧是 scrollSnapChange 事件的实时日志，其中用灰色突出显示了 SnapTargetInline。
好消息！有了这些新活动，用户可以快速轻松地获取这些信息。这将解锁滚动贴靠互动，使其超出其当前功能，并支持滚动贴靠关系和全新界面反馈场景的编排。
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。该属性的值将是元素节点。
crawlSnapChange 独有的详细信息
在执行滚动手势时提前且经常触发
与等待用户执行完整滚动手势的 scrollSnapChange 不同，此事件会在用户用手指滚动或使用触控板滚动时快速触发。设想用户未抬起手指就缓慢滚动，那么只要用户平移到多个可能的贴靠目标，scrollSnapChanging 就会在手势过程中触发多次。用户每次滚动时，如果浏览器确定在释放时它将会停留在新的贴靠目标上，就会触发该事件，让您了解该元素是哪个元素。
不会在触发新贴靠目标的过程中触发所有贴靠目标
此外，考虑一个投掷，用户做出一次跨越多个贴靠目标的滚动抛掷手势；此事件将触发一次，并且目标将作为放置对象。所以，它虽然很急，但并不浪费，所以能尽快为你提供击杀目标。
应用场景和示例
这些事件可实现许多新的用例，同时使当前模式更易于实现。一个典型的例子是启用由贴靠触发的动画。根据上下文显示贴靠项目、贴靠项目的子项或相关信息（当贴靠目标时）。
以下模式展示了一些可帮助您快速提高工作效率的使用场景。
突出显示个人鉴定
此示例会宣传或视觉上聚焦于拍摄的赞誉，
scroller.onscrollsnapchange = event => {
scroller.querySelector(':scope .snapped')?.classList.remove('snapped')
event.snapTargetInline.classList.add('snapped')
}
显示已拍摄项的图片说明
此示例显示了已贴靠项目的说明。此演示中包含这两个事件，因此您可以看到 scrollSnapChange 与 scrollSnapChanging 在时间和用户体验方面的差异。
为贴靠的演示文稿幻灯片的子项添加动画效果
此示例知道新幻灯片何时开始着陆并停放，此时是为内容添加动画一次的好时机。
document.addEventListener('scrollsnapchange', event => {
event.snapTargetBlock.classList.add('seen')
})
在滚动条中同时贴靠 x 和 y
滚动贴靠适用于允许水平和垂直滚动的滚动条。此演示会在您滚动网格时同时显示 scrollSnapChanging 和 scrollSnapChange 目标。此演示说明了浏览器贴靠到的元素可能并不总是与您想象的那个元素。
显示水平滚动条和垂直滚动条中的方形网格。虚线边框表示 scrollSnapChange 目标，实线边框表示 scrollSnapChange 目标。红色表示 SnapTargetInline，蓝色表示 SnapTargetBlock。
两个已链接的滚动条
此演示有两个滚动贴靠容器，其中一个是概要链接列表，另一个是实际的分页内容。新的 scrollSnapChanging 事件可让您轻松双向链接这些贴靠状态，以便始终保持同步。
OKLCH 颜色选择器
此演示包含 3 个滚动条，每个滚动条分别代表 OKLCH 中不同的颜色通道。贴靠项与其相关的单选组同步，并且可以从封装输入的表单中检索数据。对于鼠标或触摸用户，您可以滚动到所需的值。对于键盘用户，您可以使用 Tab 键和箭头键。对于屏幕阅读器来说，它只是一个表单。
ScrollSnapChange 用于快速将贴靠项与状态同步，而 scrollSnapChange 则用于为已应用用户输入的受影响颜色通道标题添加动画效果。
https://codepen.io/web-dot-dev/pen/OJeOOVG令人毛骨悚然的动画中心
此演示版使用 scrollsnapchange 通过贴靠触发的转场逐步增强了滚动贴靠体验。
使用以下 JavaScript 检查是否支持事件：
if ('onscrollsnapchange' in window) {
// ok to use snap change
}
可滚动标尺输入
此演示使用可滚动标尺作为选择数字输入长度的替代方法。直接在数字输入框中输入值或滚动到所需尺寸。更改事件用于在用户手势期间清除选择，而更改事件用于更新状态并强化用户的选择。
翻唱流程
此演示基于 Bramus Van Damme 的出色滚动动画重新创建流程，该动画基于著名的 macOS 翻唱流程（也提供了视频教程）为基础。唯一不同的是，scrollSnapChanging 用于隐藏影集标题，scrollSnapChange 用于显示标题。这些活动有助于有序地隐藏旧称号的热切希望和新名字的懒散显示方式。
更多激发创造力的创意
现在，了解哪个元素即将贴靠以及哪个元素已主动贴靠非常简单，您可以实现很多新的可能性！下面列出了有助于激发创造力的创意和其他用例：
- 触发延迟加载，也称为 Snapchange 触发渲染或数据提取。
- 链接到较大图片的幻灯影片缩略图。
- 为拍摄的视频缩略图切换播放/暂停视频预告片。
- Google Analytics 跟踪
- 滚动讲述
- 幸运转盘界面/用户体验
- 贴靠目标会获取锚定提示。
- 点按即可贴靠
- 贴靠即可显示
- 贴靠时发出声音
- 滑动界面
- 可滑动的标签页或轮播界面
深入研究
Chrome 团队非常高兴听到您使用这些新 API 构建的内容，并希望这能帮助您简化可滚动体验。