Element: scrollsnapchange 事件

可用性有限

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

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

scrollsnapchange 事件是 Element 接口的一个事件，当滚动操作结束，并且一个新的滚动捕捉目标被选定时，会在滚动容器上触发，紧随其后会触发相应的 scrollend 事件。

当用户在滚动容器内完成滚动操作（例如，使用触摸手势或通过拖动滚动条上的鼠标指针）并释放手势时，滚动操作结束。

语法

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

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

onscrollsnapchange = (event) => { }

事件类型

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

示例

基本用法

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

html

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

可以通过 CSS 的 scroll-snap-type 属性和其他属性的组合，将 <main> 元素变成一个在滚动时捕捉其子元素的滚动容器。例如：

css

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

以下 JavaScript 代码片段会在 <main> 元素的其中一个子元素成为新选中的捕捉目标时，在 <main> 元素上触发 scrollsnapchange 事件。在处理函数中，我们为由 SnapEvent.snapTargetBlock 属性引用的子元素添加一个 selected 类，该类可以用于在事件触发时对其进行样式设置，使其看起来像是被选中了（例如，带有动画）。

const scrollingElem = document.querySelector("main");

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

规范

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

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

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

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