@prudaily/scroll-into-view-if-needed
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.0 • Public • Published

    scroll-into-view-if-needed

    npm package

    NPM NPM

    This is a ponyfill with the added ability of animating the scroll itself.

    Kudos to @hsablonniere for sharing the original polyfill and @jocki84 for improving it!

    Install

    npm install scroll-into-view-if-needed

    API

    scrollIntoViewIfNeeded(node:Element, centerIfNeeded:boolean, options:object)

    Returns a function that can be used to cancel a scroll animation. Inspired by scroll-iv.

    Options

    centerIfNeeded

    This defaults to true to match the behavior of the WebKit/Blink implementation. Set it to false to actually only scroll the parent when needed and not further than absolutely necessary.

    duration

    The duration of the animation in milliseconds, defaults to 0 for no animation.

    easing

    default is ease. Possible values: ease|easeIn|easeOut|easeInOut|linear

    Examples

    Vanilla JS

    import scrollIntoViewIfNeeded from 'scroll-into-view-if-needed'
    
    const activeNode = document.querySelector('li.active')
    
    // Works just like Element.scrollIntoViewIfNeeded in WebKit and Blink
    scrollIntoViewIfNeeded(activeNode, false)
    
    // Animates it with a tiny animation lib, no need for jQuery or Velocity
    scrollIntoViewIfNeeded(activeNode, false, {
      duration: 150
    })

    React

    import scrollIntoViewIfNeeded from 'scroll-into-view-if-needed'
    import { Component } from 'react'
    
    export default class Homepage extends Component {
    
     constructor(props) {
      super(props)
      
      this.setSignupNode = (node) => {
       if(node) {
        this._signupNode = node
       }
      }
      this.goToSignup = (event) => {
       event.preventDefault()
       
       // Passing the dom node from react is all you need for this to work
       scrollIntoViewIfNeeded(this._signupNode, false, {
        duration: 150
       })
      }
     }
    
     render() {
      return (
        ...
        <a onClick={this.goToSignup}>Signup Now!</a>
        ...
        <form ref={this.setSignupNode}>
        ...
      )
     }
    }

    Install

    npm i @prudaily/scroll-into-view-if-needed

    DownloadsWeekly Downloads

    1

    Version

    1.1.0

    License

    MIT

    Last publish

    Collaborators

    • duyetpru
    • mxt