lucafalasco / Scroll Snap

scroll-snap

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,
  /**
   * threshold to reach before scrolling to next/prev element, expressed as a percentage in the range [0, 1]
   * [default: 0.2]
   */
  threshold: 0.2,
  /**
   * when true, the scroll container is not allowed to "pass over" the other snap positions
   * [default: false]
   */
  snapStop: false,
  /**
   * 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();

Docs

Usage with React

Contributing

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

Start the test app from docs/:

yarn start

Build lib for production:

yarn build

License

MIT