Scroll Snap - Customizable page snapping

Page Snapping done right.

With a customizable configuration
and a consistent cross browser behaviour.

> yarn add scroll-snap

Vanilla JS implementation

A native, consistent cross-browser implementation and a simple API to initialize the scroll listener.


                  import createScrollSnap from 'scroll-snap'

createScrollSnap(element, {
  snapDestinationX: '90%',
  timeout: 100,
  duration: 300,
})

Complete control over the scroll snap behaviour

Manually bind and unbind the scrolling element.
Customize the settings, set a threshold, and fine-tune the animation through custom easing functions.


                    // Only snap once
const { unbind } = createScrollSnap(
  element, 
  {
    snapDestinationX: '90%',
    timeout: 100,
    duration: 300,
    threshold: 0.2,
    easing: (t: number) => (
      t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t   
    )
  }, 
  () => unbind()
)