Scroll-into-view-if-needed

scroll-init-view-if-needed

Element.scrollIntoView ponyfills for things like "if-needed" and "smooth".

scroll-into-view-if-needed

This is a ponyfill for Element.scrollIntoViewIfNeeded. Since then the CSS working group have decided to implement its features in Element.scrollIntoView as the option scrollMode: "if-needed". Thus this library got rewritten to implement that spec instead of the soon to be deprecated one.

Don't miss the Demo.

Get it: npm install scroll-into-view-if-needed

Usage:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// es6 import
import scrollIntoView from 'scroll-into-view-if-needed';

const node = document.getElementById('hero');

scrollIntoView(node, {
  scrollMode: 'if-needed',
  block: 'nearest',
  inline: 'nearest',
})

scrollIntoView(node, { block: 'center', inline: 'center' });
// scrollMode is "always" by default

// smooth scroll if the browser supports it and if the element isn't visible
scrollIntoView(node, { behavior: 'smooth', scrollMode: 'if-needed' });

GIF FTW!

scroll-into-view-if-needed

Suggest a module

Comments