JavaScript API for interacting with CSS scroll-snap.
Zero dependencies.
Automatically accounts for scroll-padding.
yarn add scroll-snap-api npm install --save scroll-snap-apiOr use directly
import * as scrollSnapApi from 'https://cdn.pika.dev/scroll-snap-api';import { scrollSnapToNext } from 'scroll-snap-api'; scrollSnapToNext( scrollingElement, 'right' ); // 'left', 'right', 'up', 'down'import { getScrollSnapPositions } from 'scroll-snap-api'; const scroll = getScrollSnapPositions( scrollingElement ); /* { x: [ 0, 100, 150, 200 ], y: [ 0, 200, 400, 600, 800 ], } */Note: these are not scroll positions.
import { getSnapPositions } from 'scroll-snap-api'; const snap = getSnapPositions( scrollingElement ); /* { x: { start: [ 0, 100 ], center: [ 300 ], end: [ 500 ], }, y: { start: [ 0 ], center: [ 250, 500, 750 ], end: [ 1000 ], }, } */
- More documentation
- Support
dir="rtl"