{"id":13083,"library":"dom-scroll-into-view","title":"DOM Scroll Into View","description":"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.","status":"abandoned","version":"2.0.1","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/yiminghe/dom-scroll-into-view","tags":["javascript","dom","scrollIntoView"],"install":[{"cmd":"npm install dom-scroll-into-view","lang":"bash","label":"npm"},{"cmd":"yarn add dom-scroll-into-view","lang":"bash","label":"yarn"},{"cmd":"pnpm add dom-scroll-into-view","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"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.","wrong":"const scrollIntoView = require('dom-scroll-into-view');","symbol":"scrollIntoView","correct":"import scrollIntoView from 'dom-scroll-into-view';"}],"quickstart":{"code":"\n\n \n\n\n
\n
\n
Scrollable container content...
\n
Target Element
\n
More content...
\n
\n
\n \n\n \n\n","lang":"javascript","description":"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."},"warnings":[{"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`.","message":"The `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.","severity":"breaking","affected_versions":">=2.0.1"},{"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.","message":"Modern 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.","severity":"gotcha","affected_versions":">=2.0.1"},{"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.","message":"The 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.","severity":"gotcha","affected_versions":">=2.0.1"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"The `source` or `container` element passed to `scrollIntoView` is `null` or `undefined`, meaning the DOM element could not be found.","error":"TypeError: Cannot read properties of null (reading 'style')"},{"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.","cause":"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.","error":"scrollIntoView is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":""}