https://github.com/lachlanarthur/scroll-snap-api
JavaScript API for interacting with CSS scroll-snap
https://github.com/lachlanarthur/scroll-snap-api
css-scroll-snap
Last synced: 8 months ago
JSON representation
JavaScript API for interacting with CSS scroll-snap
- Host: GitHub
- URL: https://github.com/lachlanarthur/scroll-snap-api
- Owner: LachlanArthur
- License: mit
- Created: 2020-04-14T02:13:26.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T03:22:16.000Z (over 3 years ago)
- Last Synced: 2025-02-15T06:43:05.757Z (over 1 year ago)
- Topics: css-scroll-snap
- Language: TypeScript
- Homepage:
- Size: 659 KB
- Stars: 12
- Watchers: 3
- Forks: 0
- Open Issues: 9
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# scroll-snap-api
JavaScript API for interacting with [CSS scroll-snap](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap).
Zero dependencies.
Automatically accounts for `scroll-padding`.
## Install
```shell
yarn add scroll-snap-api
npm install --save scroll-snap-api
```
Or use directly
```js
import * as scrollSnapApi from 'https://cdn.pika.dev/scroll-snap-api';
```
## Usage
### Scroll an element to the next snap position in a direction
```js
import { scrollSnapToNext } from 'scroll-snap-api';
scrollSnapToNext( scrollingElement, 'right' ); // 'left', 'right', 'up', 'down'
```
### Get the possible scroll positions
```js
import { getScrollSnapPositions } from 'scroll-snap-api';
const scroll = getScrollSnapPositions( scrollingElement );
/*
{
x: [ 0, 100, 150, 200 ],
y: [ 0, 200, 400, 600, 800 ],
}
*/
```
### Get the raw snap positions
Note: these are not scroll positions.
```js
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 ],
},
}
*/
```
## TODO
- More documentation
- Support `dir="rtl"`