# Document: scrollsnapchange event



The **`scrollsnapchange`** event of the [Document](https://developer.mozilla.org/en-US/docs/Web/API/Document) interface is fired on the document [scroll container](https://developer.mozilla.org/en-US/docs/Glossary/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 [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) interface's [`scrollsnapchange`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollsnapchange_event) event, except that the overall HTML document has to be set as the scroll snap container (i.e., [scroll-snap-type](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type) is set on the [html](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html) element).

## Syntax

Use the event name in [addEventListener()](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget%2FaddEventListener):

```js-nolint
addEventListener("scrollsnapchange", (event) => { })
```

Alternatively, assign to the [event handler property](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Events#using_onevent_properties) of the interface:

```js-nolint
onscrollsnapchange = (event) => { }
```

## Event type

A [SnapEvent](https://developer.mozilla.org/en-US/docs/Web/API/SnapEvent), which inherits from the generic [Event](https://developer.mozilla.org/en-US/docs/Web/API/Event) type.

## Examples

### Basic usage

Let's say we have a [main](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main) element containing significant content that causes it to scroll:

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

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

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

We can then implement scroll snapping behavior on the scrolling content by specifying the [scroll-snap-type](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type) property on the [html](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html) element:

```css
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 [SnapEvent.snapTargetBlock](https://developer.mozilla.org/en-US/docs/Web/API/SnapEvent/snapTargetBlock), which could be used to style it to look like it has been selected (for example, with an animation) when the event fires.

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

## Specifications

## Browser compatibility

## See also

- [scrollsnapchanging](https://developer.mozilla.org/en-US/docs/Web/API/Document%2Fscrollsnapchanging_event) event
- [scrollend](https://developer.mozilla.org/en-US/docs/Web/API/Document%2Fscrollend_event) event
- [SnapEvent](https://developer.mozilla.org/en-US/docs/Web/API/SnapEvent)
- CSS [scroll-snap-type](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type) property
- [CSS scroll snap module](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Scroll_snap)
- [Using scroll snap events](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Scroll_snap/Using_scroll_snap_events)
- [Scroll Snap Events](https://developer.chrome.com/blog/scroll-snap-events) on developer.chrome.com (2024)