文档：scrollsnapchange 事件

可用性有限

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

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

scrollsnapchange 事件是 Document 接口的一个事件，在滚动操作结束时，当一个新的滚动捕捉目标被选中时，会在文档滚动容器上触发。

此事件的工作方式与 Element 接口的 scrollsnapchange 事件非常相似，不同之处在于整个 HTML 文档必须被设置为滚动捕捉容器（即，在 <html> 元素上设置了 scroll-snap-type）。

语法

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

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

onscrollsnapchange = (event) => { }

事件类型

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

示例

基本用法

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

html

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

可以通过组合 CSS 属性将 <main> 元素转变为滚动容器，例如：

css

main {
  width: 250px;
  height: 450px;
  overflow: scroll;
}

然后，我们可以通过在 <html> 元素上指定 scroll-snap-type 属性，来为滚动内容实现滚动吸附行为。

css

html {
  scroll-snap-type: block mandatory;
}

下面的 JavaScript 代码片段将导致当 <main> 元素的子元素成为新选中的捕捉目标时，在 HTML 文档上触发 scrollsnapchange 事件。在处理函数中，我们在 SnapEvent.snapTargetBlock 引用的子元素上设置一个 selected 类，该类可以在事件触发时用于为其设置样式，使其看起来像是被选中了（例如，通过动画）。

document.addEventListener("scrollsnapchange", (event) => {
  event.snapTargetBlock.classList.add("selected");
});

规范

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

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

本页最后修改于 2025年5月2日，由 MDN 贡献者修改。

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