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!
npm install scroll-into-view-if-needed
Returns a function that can be used to cancel a scroll animation. Inspired by scroll-iv.
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.
The duration of the animation in milliseconds, defaults to 0 for no animation.
default is ease. Possible values: ease|easeIn|easeOut|easeInOut|linear
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
})
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}>
...
)
}
}