Nighttime Possum Meandering

    scroll-snap
    TypeScript icon, indicating that this package has built-in type declarations

    3.2.4 • Public • Published

    scroll-snap


    npm npm npm downloads

    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

    Install

    npm i scroll-snap

    DownloadsWeekly Downloads

    808

    Version

    3.2.4

    License

    MIT

    Unpacked Size

    64.2 kB

    Total Files

    9

    Last publish

    Collaborators

    • lucafalasco