scroll-into-view-if-needed
Advanced tools
Element.scrollIntoViewIfNeeded ponyfill that can animate the scrolling
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.
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);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.
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 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 a ponyfill with the added ability of animating the scroll itself.
Kudos to @hsablonniere for sharing the original polyfill and @jocki84 for improving it!
yarn add scroll-into-view-if-needed
const scrollIntoViewIfNeeded = require('scroll-into-view-if-needed')
const node = document.getElementById('hero')
// similar behavior as Element.scrollIntoView({block: "nearest", inline: "nearest"})
// only that it is a no-op if `node` is already visible
// see: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
scrollIntoViewIfNeeded(node)
// same behavior as Element.scrollIntoViewIfNeeded(true)
// see: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded
scrollIntoViewIfNeeded(node, { centerIfNeeded: true })
// animate the transition by setting a duration (in milliseconds)
scrollIntoViewIfNeeded(node, { duration: 300 })
New API introduced in
v1.3.0
Type: Object
Type: Element
Default: document.documentElement
Outermost parent element that might be scrolled to bring target into view. Use
this if you have multiple scrollable views and you need to limit what's
scrolled. Also use this if you know that you will only need to scroll the parent
of your target to skip performance costly checks.
Type: boolean
Default: false
Center the target if possible, and if it's not already visible. If it's not
centered but still visible it will not scroll.
Type: number
Set a duration in milliseconds to animate the transition between scroll positions on the x and/or y axis.
Type: 'ease' | 'easeIn' | 'easeOut' | 'easeInOut' | 'linear'
Change the easing mechanism. This option takes effect when duration is set. In
v2.0.0 it'll be possible to set your own
bezier easing similar to CSS
cubic-bezier().
Type: Object
Used for creating whitespace between the target and the scroll container.
Useful in scenarios where a position: fixed element might overlay the scroll
container to "offset" the target.
However this option has known bugs and may be dropped or replaced in v2.0.0.
If possible wrap your target in an element and create spacing using CSS padding or similar. This way you won't be affected by breaking changes here or
the current bugs.
Type: number
Default: 0
Behaves similarily to margin-top. A negative value will "pull" the target
upward, while a positive value will "push" it downwards.
Type: number
Default: 0
Type: number
Default: 0
Type: number
Default: 0
Legacy API, will be deprecated in
v2.0.0
Type: boolean
Default: false
Legacy alias for options.centerIfNeeded
Type: Object
Type: number
Legacy alias for options.duration
Type: string
Legacy alias for options.easing
Type: string
Legacy alias for options.boundary
Type: Object
Type: number
Legacy alias for options.offset.top
Type: number
Legacy alias for options.offset.right
Type: number
Legacy alias for options.offset.bottom
Type: number
Legacy alias for options.offset.left
import scrollIntoViewIfNeeded from 'scroll-into-view-if-needed'
import { Component } from 'react'
export default class Homepage extends Component {
render() {
return (
<div>
...
<a
onClick={event => {
scrollIntoViewIfNeeded(this._signupNode, {
duration: 150,
})
}}
>
Signup Now!
</a>
...
<form
ref={node => {
this._signupNode = node
}}
>
...
</form>
...
</div>
)
}
}
<script src="https://unpkg.com/scroll-into-view-if-needed@latest"></script>
<script>
var node = document.getElementById('hero')
// if you don't have a bundler don't worry, you can access the global like the good old days
scrollIntoViewIfNeeded(node)
</script>
[1.3.0] - 2017-11-12
FAQs
Ponyfill for upcoming Element.scrollIntoView() APIs like scrollMode: if-needed, behavior: smooth and block: center
The npm package scroll-into-view-if-needed receives a total of 1,644,802 weekly downloads. As such, scroll-into-view-if-needed popularity was classified as popular.
We found that scroll-into-view-if-needed demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.