Registry / web-framework / dom-scroll-into-view

dom-scroll-into-view

library2.0.1jsnpmunverified

dom-scroll-into-view is a JavaScript utility designed to programmatically scroll a specified DOM element (`source`) into visibility within a designated parent (`container`). Unlike the native `Element.scrollIntoView()` method, which primarily scrolls the nearest scrollable ancestor or the viewport, this library allows explicit control over which container performs the scrolling. It offers configurable options for horizontal and vertical alignment, as well as pixel offsets from the container's edges. The current stable version is 2.0.1, but it was last published approximately 7 years ago, indicating it is no longer actively maintained. Its core differentiation lies in the `container` parameter and fine-grained positioning, which predates many of the advanced options now available in the native `scrollIntoView` method in modern browsers.

web-framework http-networking

npm install dom-scroll-into-view

github ↗package ↗

INSTALL

IMPORT

SIG · DOM-SCROLL-INTO-VI

dom-scroll-into-view

web-frameworkjavascriptv2.0.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

scrollIntoView

✓ import scrollIntoView from 'dom-scroll-into-view';

✗ const scrollIntoView = require('dom-scroll-into-view');

The library primarily uses a default export. CommonJS 'require' syntax may not be the intended or most compatible approach for modern module bundlers, though older Node environments might use it.

This example demonstrates how to use `dom-scroll-into-view` to scroll a specific child element (`#target`) into the visible area of a parent scrollable container (`#container`) when a button is clicked. It uses a default import and configures specific alignment options and offsets.

<html> <head> <style> #container { width: 300px; height: 200px; overflow: auto; border: 1px solid black; margin: 20px; position: relative; } #content { height: 500px; width: 400px; background-color: lightblue; padding-top: 20px; } #target { width: 100px; height: 50px; background-color: lightcoral; margin-top: 300px; /* Position it far down */ margin-left: 250px; /* Position it far right */ text-align: center; line-height: 50px; color: white; } </style> </head> <body> <div id="container"> <div id="content"> <p>Scrollable container content...</p> <div id="target">Target Element</div> <p>More content...</p> </div> </div> <button id="scrollButton">Scroll Target into View</button> <script type="module"> import scrollIntoView from 'dom-scroll-into-view'; const source = document.getElementById('target'); const container = document.getElementById('container'); const scrollButton = document.getElementById('scrollButton'); if (source && container && scrollButton) { scrollButton.addEventListener('click', () => { scrollIntoView(source, container, { alignWithLeft: true, alignWithTop: false, onlyScrollIfNeeded: true, offsetTop: 10, offsetLeft: 10 }); console.log('Attempted to scroll target into view within container.'); }); } else { console.error('One or more elements not found.'); } </script> </body> </html>

Debug

Known issues

breakingThe `dom-scroll-into-view` package has not been updated in approximately 7 years (last publish was version 2.0.1). It is considered abandoned, which means it will not receive bug fixes, security updates, or compatibility improvements for newer browser versions or web standards.

fix

Consider migrating to native `Element.scrollIntoView()` with its modern options (e.g., `behavior: 'smooth'`, `block: 'center'`) or a actively maintained alternative like `scroll-into-view-if-needed`.

affects: >=2.0.1

gotchaModern browsers have significantly enhanced the native `Element.scrollIntoView()` method, allowing for smooth scrolling, and options for `block` (vertical) and `inline` (horizontal) alignment, including `'start'`, `'center'`, `'end'`, and `'nearest'`. While `dom-scroll-into-view` allows specifying a `container`, many use cases requiring advanced alignment can now be handled directly by the native method, potentially making this library redundant for simpler needs.

fix

Before using this library, evaluate if `element.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' })` can achieve the desired effect. If the ability to specify a *specific scrollable ancestor* beyond the nearest one is critical, then a library might still be needed, but newer, maintained alternatives are preferable.

affects: >=2.0.1

gotchaThe library's behavior and performance might not be optimized for complex layouts, virtualized lists, or applications requiring high-frequency scrolling, given its age and lack of updates. It does not integrate with newer browser APIs like `Intersection Observer` for visibility detection, which might be more performant.

fix

For highly dynamic or performance-critical applications, consider purpose-built component libraries or more actively maintained scrolling utilities that leverage modern browser features and optimizations.

affects: >=2.0.1

Errors

Common errors & fixes

TypeError: Cannot read properties of null (reading 'style')

The `source` or `container` element passed to `scrollIntoView` is `null` or `undefined`, meaning the DOM element could not be found.

fix

Ensure that the `source` and `container` arguments are valid `HTMLElement` objects before calling `scrollIntoView`. Always check if `document.getElementById('yourId')` or similar DOM queries return a non-null value.

scrollIntoView is not a function

The `scrollIntoView` function was not imported correctly, or the module bundler failed to resolve the import, or it's being used in a non-browser environment.

fix

Verify the import statement: `import scrollIntoView from 'dom-scroll-into-view';`. Ensure that the code is running in a browser environment where DOM manipulation is possible. If using CommonJS, confirm your setup supports interoperability with ESM or try `const scrollIntoView = require('dom-scroll-into-view').default;` if using an older bundler.

Upgrade

Version history

2.0.1latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

5 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/yiminghe/dom-scroll-into-view ↗

packagehttps://www.npmjs.com/package/dom-scroll-into-view ↗