Scroll Element Into View If Needed

Preview:

Description:

scroll-into-view-if-needed is a JavaScript ponyfill for the Element.scrollIntoViewIfNeeded() method that enables the user to smoothly scroll a specific element into the viewport if the element is NOT out of the screen.

Comes with some useful options such as scroll alignment, limit propagation, custom transition and more.

Basic usage:

Install & download the scrollIntoViewIfNeeded package.

# Yarn
$ yarn add scroll-into-view-if-needed
# NPM
$ npm install scroll-into-view-if-needed --save

Import the scrollIntoViewIfNeeded library.

// ES 6
import scrollIntoView from 'scroll-into-view-if-needed';
// CommonJS:
const scrollIntoView = require('scroll-into-view-if-needed');

Initialize the library and specify the target node.

scrollIntoView(target, options)

All possible options to customize the smooth scroll effect.

scrollIntoView(target, {
  // 'auto' | 'smooth' | 'instant' | Function
  behavior: 'auto',
  // 'always' | 'if-needed'
  scrollMode: 'always',
  // Element | Function
  boundary: null,
  // 'start' | 'center' | 'end' | 'nearest'
  block: 'center',
  // 'start' | 'center' | 'end' | 'nearest'
  inline: 'start'
})

Changelog:

v1.15.1 (11/08/2018)

• Update