Element: scrollsnapchanging 事件

可用性有限

此特性不是基线特性，因为它在一些最广泛使用的浏览器中不起作用。

实验性： 这是一项实验性技术
在生产中使用此技术之前，请仔细检查浏览器兼容性表格。

Element 接口的 scrollsnapchanging 事件在滚动容器上触发，当浏览器确定有新的滚动吸附目标待定（即，当前滚动操作结束时将被选中）时。

具体来说，在滚动操作期间，每当用户移过潜在的新吸附目标时，都会触发此事件。例如，用户可以通过在触摸屏设备上拖动手指，或者在滚动条上按住鼠标按钮并移动鼠标来进行缓慢滚动。因此，对于每个滚动操作，scrollsnapchanging 可能会触发多次。

但是，如果一个滚动操作会经过多个吸附目标，该事件不会在所有潜在的目标上触发。相反，它只会在吸附最终可能停留的最后一个目标上触发。

语法

在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。

addEventListener("scrollsnapchanging", (event) => { })

onscrollsnapchanging = (event) => { }

事件类型

一个 SnapEvent，它继承自通用的 Event 类型。

示例

基本用法

假设我们有一个 <main> 元素，其中包含大量会导致其滚动的内容。

html

<main>
  <!-- Significant content -->
</main>

<main> 元素可以通过结合使用 CSS scroll-snap-type 属性和其他属性，在滚动时吸附到其子元素，从而变成一个滚动容器。例如：

css

main {
  width: 250px;
  height: 450px;
  overflow: scroll;
  scroll-snap-type: block mandatory;
}

以下 JavaScript 片段会在 <main> 元素的子元素成为待定的吸附目标时，在该元素上触发 scrollsnapchanging 事件。在处理函数中，我们在由 snapTargetBlock 属性引用的子元素上设置一个 pending 类，该类可用于在事件触发时对其进行不同的样式设置。

scrollingElem.addEventListener("scrollsnapchanging", (event) => {
  // remove previously-set "pending" classes
  const pendingElems = document.querySelectorAll(".pending");
  pendingElems.forEach((elem) => {
    elem.classList.remove("pending");
  });

  // Set current pending snap target class to "pending"
  event.snapTargetBlock.classList.add("pending");
});

在函数开头，我们选择所有先前应用了 pending 类的元素并移除该类，以便只有最新的待定吸附目标会被设置样式。

规范

规范
CSS 滚动捕捉模块级别 2 # scrollsnapchanging

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后修改时间为 ⁨2025年5月2日⁩，作者为 MDN 贡献者。

在 GitHub 上查看此页面 • 报告此内容的问题