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

    4.0.2 • 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 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 configuraiton 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]
    [default: 0.2]

    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, 1]
    [default: easeInOutQuad]

    For 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

    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

    Install

    npm i scroll-snap

    DownloadsWeekly Downloads

    1,141

    Version

    4.0.2

    License

    MIT

    Unpacked Size

    57.9 kB

    Total Files

    9

    Last publish

    Collaborators

    • lucafalasco