@masshuu/scroll-utilities
v1.1.0
Published
Library that provides utilities for scrolling and managing scroll behavior
Downloads
4
Readme
Scroll Utilities
This module provides a set of utility methods for managing and controlling scrolling behavior of HTML elements.
Installation
You can install this module via npm
using the following command:
npm install --save @masshuu/scroll-utilities
Usage
You can import the Scroll
class from the module as follows:
import Scroll from "@masshuu/scroll-utilities";
Once you have imported the class, you can use its methods as follows:
Scroll.enable(selector: string = "body"): void
This method enables scrolling on an HTML element by setting its overflow style to an empty string.
selector
(optional) - A CSS selector for the HTML element to enable scrolling on. Defaults to"body"
.
Scroll.disable(selector: string = "body"): void
This method disables scrolling on an HTML element by setting its overflow style to "hidden".
selector
(optional) - A CSS selector for the HTML element to disable scrolling on. Defaults to"body"
.
Scroll.intoView(options: Readonly): void
This method scrolls an HTML element into view using the specified options.
options
- An options object that specifies the target element to scroll to and the scrolling behavior to use.target
- A CSS selector or DOM element to scroll into view.behavior
(optional) - The scrolling behavior to use. Defaults to"smooth"
.block
(optional) - The vertical position to align the target element within the viewport. Defaults to"start"
.inline
(optional) - The horizontal position to align the target element within the viewport. Defaults to"nearest"
.
Example
Here is an example usage of the Scroll class:
import Scroll from "@masshuu/scroll-utilities";
// enable scrolling on the body element
Scroll.enable();
// scroll to an element with the ID "target" with smooth behavior
Scroll.intoView({
target: "#target",
});
License
This module is licensed under the ISC
License. See the LICENSE
file for more details.