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

scroll-into-view-if-needed

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}>
    ...
  )
 }
}