native-scroll-controller
v1.0.4
Published
```sh npm i native-scroll-controller ```
Downloads
6
Readme
Installation
npm i native-scroll-controller
Usage
To get started with native-scroll-controller
, you'll need to import and use two main functions: createOptions
and createScroll
.
createOptions(duration)
- creates an object with scroll animation settings. Theduration
parameter specifies the animation duration in milliseconds.createScroll(options)
- creates an object to control the scroll animation with the specified settings. Theoptions
parameter is an object with settings created usingcreateOptions
.
Example usage:
index.html
<div class="first-block" data-scroll-block="first">
<h1>Block 1</h1>
<button data-scroll-link="second">Go to block 2</button>
</div>
<div class="second-block" data-scroll-block="second">
<h1>Block 2</h1>
<button data-scroll-link="first">Go to block 1</button>
</div>
For elements that trigger scrolling to a specified block on click, you should set
data-scroll-link="name"
. For example:<a href="#" data-scroll-link="section1">Link</a>
.For blocks to which scrolling will be applied, you should set
data-scroll-block="name"
. For example:<div data-scroll-block="section1">This is a scrollable block.</div>
.
style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.first-block,
.second-block {
height: 100vh;
}
.first-block {
background-color: antiquewhite;
}
.second-block {
background-color: aqua;
}
index.js
import { createOptions, createScroll } from "native-scroll-controller";
const options = createOptions(1500); // Scroll animation duration in milliseconds
createScroll(options);
API
createOptions(duration):
duration
(required) - the duration of the scroll animation in milliseconds.
createScroll(options):
options
(required) - an object with animation settings created usingcreateOptions
.
License
This package is distributed under the MIT License. See the LICENSE file for details.