1. Web
  2. Web API
  3. SnapEvent

SnapEvent

可用性有限

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

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

SnapEvent 接口定义了 scrollsnapchanging 和 scrollsnapchange 事件的事件对象。分别地，当浏览器确定一个新的滚动吸附目标（将在当前滚动操作结束时被选中）即将生效时，这些事件会在一个 滚动容器上触发；当一个新的吸附目标被选中时，也会在 scrollsnapchange 事件上触发。

这些事件可用于响应新元素被吸附的代码；SnapEvent 暴露了内联和/或块方向上被吸附元素的引用。SnapEvent 上可用的属性值直接对应于设置在滚动容器上的 scroll-snap-type CSS 属性的值。

  • 如果吸附轴被指定为 block（或在当前书写模式下等同于 block 的物理轴值），则只有 snapTargetBlock 返回一个元素引用。
  • 如果吸附轴被指定为 inline（或在当前书写模式下等同于 inline 的物理轴值），则只有 snapTargetInline 返回一个元素引用。
  • 如果吸附轴被指定为 both，则 snapTargetBlock 和 snapTargetInline 都会返回一个元素引用。
Event SnapEvent

构造函数

SnapEvent()

创建一个新的 SnapEvent 对象实例。

实例属性

继承其父级 Event 的属性。

snapTargetBlock 只读

返回一个在事件触发时吸附到块方向的元素的引用，如果滚动吸附只发生在内联方向，则没有元素吸附到块方向，则返回 null。

snapTargetInline 只读

返回一个在事件触发时吸附到内联方向的元素的引用，如果滚动吸附只发生在块方向，则没有元素吸附到内联方向，则返回 null。

示例

scrollsnapchanging 示例

在下面的 scrollsnapchanging 处理函数片段中，我们使用 Element.className 属性将 snapTargetBlock 元素的 class 属性设置为 pending，这可以用于在元素成为一个待定的吸附目标时对其进行不同的样式设置。

请注意，此处理函数旨在设置在一个块方向的滚动容器上（如果页面设置为水平 writing-mode，则为垂直滚动），因此在多个事件触发之间只有 snapTargetBlock 元素会发生变化。SnapEvent.snapTargetInline 将返回 null，因为在内联方向没有发生吸附。

js
scrollingElem.addEventListener("scrollsnapchanging", (event) => {
  // Set current pending snap target class to "pending"
  event.snapTargetBlock.className = "pending";

  // Logs the new pending block-direction snap target element
  console.log(event.snapTargetBlock);

  // Logs null; no inline snapping occurs
  console.log(event.snapTargetInline);
});

scrollsnapchange 示例

在下面的 scrollsnapchange 处理函数片段中，我们在 SnapEvent.snapTargetBlock 元素上设置了一个 selected 类，这可用于为新选中的吸附目标设置样式，使其看起来已被选中（例如，带有动画）。

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

规范

规范
CSS 滚动捕捉模块级别 2
# snapevent-interface

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后修改于 ，由 MDN 贡献者 修改。

在 GitHub 上查看此页面 • 报告此内容的问​​题
© . Content available under a Creative Commons license.