scroll-snap v4.0.5
Snap page when user stops scrolling, basically implements CSS Scroll Snap, adding a customizable configuration and a consistent cross browser behaviour.
- Works in all modern browsers
requestAnimationFrame
for 60fps- Customizable settings (including easing functions)
- No additional dependencies
- No extra stylesheet
Installation
yarn add scroll-snap
You can also grab a pre-built version from unpkg
Usage
createScrollSnap(element, settings, [callback])
Arguments
element: HTMLElement
The HTML DOM Element to attach the scroll listener to.
settings: Settings
A configuration object consisting of one or more of the following keys:
snapDestinationX: string | number
Snap destination for x axis, should be a valid css value expressed as
px | % | vw | vh
snapDestinationY: string | number
Snap destination for y axis, should be a valid css value expressed as
px | % | vw | vh
timeout: number
Time in ms after which scrolling is considered finished
default: 100
duration: number
Duration in ms for the smooth snap
default: 300
threshold: number
Threshold to reach before scrolling to next/prev element, expressed as a percentage in the range 0, 1
snapStop: boolean
When true, the scroll container is not allowed to "pass over" the other snap positions
default: false
easing: (t: number) => number
Custom easing function
@param t
: normalized time typically in the range 0, 1For reference: https://gist.github.com/gre/1650294
callback: () => void
Optional
Optional callback to execute once the animation ends.
Returns
An object including two handlers to manually attach and remove the scroll event listener
{
// attaches the scroll event listener
bind: () => void
// removes the scroll event listener
unbind: () => void
}
Example
import createScrollSnap from 'scroll-snap'
const element = document.getElementById('container')
const { bind, unbind } = createScrollSnap(element, {
snapDestinationX: '0%',
snapDestinationY: '90%',
timeout: 100,
duration: 300,
threshold: 0.2,
snapStop: false,
easing: easeInOutQuad,
}, () => console.log('element snapped'))
// remove the listener
// unbind();
// re-instantiate the listener
// bind();
Usage with React (custom hook)
Contributing
git clone https://github.com/lucafalasco/scroll-snap.git
cd scroll-snap
yarn install
Start the testing environment from playground/
:
yarn start
Build lib for production:
yarn build
License
MIT
3 months ago
3 months ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago