dom-scroll-into-view

What is dom-scroll-into-view?

The 'dom-scroll-into-view' npm package provides utilities to smoothly scroll a DOM element into view within its container. It offers customizable options to control the alignment and behavior of the scrolling action.

What are dom-scroll-into-view's main functionalities?

Basic Scroll Into View

This feature allows you to scroll a specific DOM element into view within its container. The example demonstrates how to scroll an element with the ID 'targetElement' into view within the document body.

const scrollIntoView = require('dom-scroll-into-view');
const element = document.getElementById('targetElement');
scrollIntoView(element, document.body);

Custom Alignment

This feature allows you to customize the alignment of the element when it is scrolled into view. The example shows how to align the element with the top of the container.

const scrollIntoView = require('dom-scroll-into-view');
const element = document.getElementById('targetElement');
scrollIntoView(element, document.body, { alignWithTop: true });

Smooth Scrolling

This feature enables smooth scrolling when bringing an element into view. The example demonstrates how to scroll the element smoothly into view within the document body.

const scrollIntoView = require('dom-scroll-into-view');
const element = document.getElementById('targetElement');
scrollIntoView(element, document.body, { behavior: 'smooth' });

Other packages similar to dom-scroll-into-view

scroll-into-view-if-needed

The 'scroll-into-view-if-needed' package provides similar functionality to 'dom-scroll-into-view' but with additional options for controlling the scrolling behavior. It offers more granular control over when and how the scrolling should occur, including options for center alignment and ensuring the element is fully visible.

smooth-scroll-into-view-if-needed

The 'smooth-scroll-into-view-if-needed' package extends the functionality of 'scroll-into-view-if-needed' by adding smooth scrolling capabilities. It provides a more modern and user-friendly scrolling experience, similar to 'dom-scroll-into-view' but with enhanced smooth scrolling options.

README

dom-scroll-into-view

scroll node in contain to make node visible

install

Usage

import scrollIntoView from 'dom-scroll-into-view';
scrollIntoView(source,container,config);

Development

npm install
npm start

Example

http://localhost:8000/examples/

online example: http://yiminghe.github.io/dom-scroll-into-view/

function parameter

name	type	default	description
source	HTMLElement		node wanted to show
container	HTMLElement
config.alignWithLeft	Boolean		whether align with left edge
config.alignWithTop	Boolean		whether align with top edge
config.offsetTop	Number
config.offsetLeft	Number
config.offsetBottom	Number
config.offsetRight	Number
config.allowHorizontalScroll	Boolean		whether allow horizontal scroll container
config.onlyScrollIfNeeded	Boolean		whether scroll container when source is visible

License

dom-scroll-into-view is released under the MIT license.