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 configuration (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

Call the constructor passing a DOM element and a configuration object as parameters, then use:

bind() to initialize the scroll snap and attach the scroll event listener, takes an optional callback as parameter to execute once the animation ends.

unbind() to remove the listener on the element.

Check out the following code:

import ScrollSnap from 'scroll-snap'

const snapConfig = {
  /**
   * snap-destination for x and y axes
   * should be a valid css value expressed as px|%|vw|vh
   **/
  snapDestinationX: '0%',
  snapDestinationY: '90%',
  /**
   * time in ms after which scrolling is considered finished
   * [default: 100]
   **/
  timeout: 100,
  /**
   * duration in ms for the smooth snap
   * [default: 300]
   **/
  duration: 300,
  /**
   * custom easing function
   * [default: easeInOutQuad]
   * for reference: https://gist.github.com/gre/1650294
   * @param t normalized time typically in the range [0, 1]
   **/
  easing: easeInOutQuad,
}

function callback() {
  console.log('element snapped')
}

const element = document.getElementById('container')
const snapObject = new ScrollSnap(element, snapConfig)

snapObject.bind(callback)

// unbind the element
// snapObject.unbind();

Demo

Usage with React

Contributing

git clone https://github.com/lucafalasco/scroll-snap.git
cd scroll-snap
yarn install

Start the test app from demo/:

yarn start

Build lib for production:

yarn build

License

MIT