What is scroll-into-view-if-needed?
The scroll-into-view-if-needed npm package is a smooth scroll polyfill for the 'scrollIntoViewIfNeeded' DOM method, which allows elements to be scrolled into the viewport if they are not already visible. It provides a way to scroll an element into view, aligning it according to the specified options only if it is not already in view.
What are scroll-into-view-if-needed's main functionalities?
Basic scrolling into view if needed
This is the simplest use case where you can call the method on an element to ensure it is visible in the viewport.
element.scrollIntoViewIfNeeded();
Custom options for scrolling
This allows you to define custom options for the scrolling behavior, such as the alignment of the scrolled-to element within the viewport.
scrollIntoViewIfNeeded(node, {block: 'nearest', inline: 'nearest'});
Polyfill for unsupported browsers
The package can be used as a polyfill to provide the functionality in browsers that do not support 'scrollIntoViewIfNeeded' natively.
import scrollIntoViewIfNeeded from 'scroll-into-view-if-needed';
scrollIntoViewIfNeeded(node);
Other packages similar to scroll-into-view-if-needed
smoothscroll-polyfill
This package is a polyfill for the smooth scroll behavior in the scrollTo, scrollBy, and scrollIntoView methods. It is similar to scroll-into-view-if-needed but focuses on polyfilling the smooth scroll behavior across all scrolling methods.
scroll-into-view
Similar to scroll-into-view-if-needed, this package provides a function to scroll an element into view. However, it does not specifically check if the element is already in view and always performs the scroll action.
zenscroll
Zenscroll is a vanilla JavaScript library that enables smooth animated scrolling to elements on the page. While it provides similar smooth scrolling functionality, it does not have the conditional 'if-needed' aspect of scroll-into-view-if-needed.
This is the work-in-progress, the current stable version is here
This used to be just a ponyfill for
Element.scrollIntoViewIfNeeded
but is currently being rewritten to cover
Element.scrollIntoView(ScrollIntoViewOptions)
including the new scrollMode: "if-needed"
option. This readme will be updated when it's ready for stable
release.
Install
yarn add scroll-into-view-if-needed@next
Usage
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' })
scrollIntoView(node, { behavior: 'smooth', scrollMode: 'if-needed' })
Ponyfill smooth scrolling
If you're ok with a larger bundlesize and want the smooth scrolling behavior to be ponyfilled you can use the smooth-scroll-into-view-if-needed
addon.
Custom scrolling transition
If the default smooth scrolling ponyfill isn't the duration or easing you want,
you can provide your own scrolling logic by giving behavior
a callback.
import scrollIntoView from 'scroll-into-view-if-needed'
const node = document.getElementById('hero')
scrollIntoView(node, {
behavior: scrollActions =>
scrollActions.forEach(({ el, top, left }) => {
el.scrollTop = top
el.scrollLeft = left
const offsetTop = el.scrollTop - top
const offsetLeft = el.scrollLeft - left
}),
})
More documentation will be added (hang in there)