Package Exports

scroll-into-view-if-needed

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (scroll-into-view-if-needed) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

yarn add scroll-into-view-if-needed

API

scrollIntoViewIfNeeded(node:Element, centerIfNeeded:boolean, AnimateOptions: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.

AnimateOptions.duration

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

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