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. The duration parameter specifies the animation duration in milliseconds.

• createScroll(options) - creates an object to control the scroll animation with the specified settings. The options parameter is an object with settings created using createOptions.

Example usage:

Example code with CodeSandBox

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 using createOptions.

License

This package is distributed under the MIT License. See the LICENSE file for details.