跳转到主要内容

Document: scrollsnapchange event

{{APIRef}}{{SeeCompatTable}}

The scrollsnapchange event of the {{domxref("Document")}}Document interface is fired on the document scroll container at the end of a scrolling operation when a new scroll snap target is selected.

This event works in much the same way as the {{domxref("Element")}}Element interface's scrollsnapchange event, except that the overall HTML document has to be set as the scroll snap container (i.e., {{cssxref("scroll-snap-type")}}type is set on the {{htmlelement("html")}}html element).

Syntax

Use the event name in {{domxref("EventTarget/addEventListener", "addEventListener()")}}:

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

Alternatively, assign to the event handler property of the interface:

onscrollsnapchange = (event) => { }

Event type

A {{domxref("SnapEvent")}}SnapEvent, which inherits from the generic {{domxref("Event")}}Event type.

Examples

Basic usage

Let's say we have a {{htmlelement("main")}}main element containing significant content that causes it to scroll:

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

The <main> element can be turned into a scroll container using a combination of CSS properties, for example:

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

We can then implement scroll snapping behavior on the scrolling content by specifying the {{cssxref("scroll-snap-type")}}type property on the {{htmlelement("html")}}html element:

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

The following JavaScript snippet would cause the scrollsnapchange event to fire on the HTML document when a child of the <main> element becomes a newly-selected snap target. In the handler function, we set a selected class on the child referenced by the {{domxref("SnapEvent.snapTargetBlock")}}snapTargetBlock, which could be used to style it to look like it has been selected (for example, with an animation) when the event fires.

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

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also