This module provides a set of utility methods for managing and controlling scrolling behavior of HTML elements.
You can install this module via npm
using the following command:
npm install --save @masshuu/scroll-utilities
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:
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"
.
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"
.
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"
.
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",
});
This module is licensed under the ISC
License. See the LICENSE
file for more details.