Smoothscroll-js

A simple smooth scroll library for JavaScript.

Advantages

• Easy to use
• Lightweight
• Fast
• Cross-browser
• Customizable

Installation

npm install @dilane3/smoothscroll-js

or

yarn add @dilane3/smoothscroll-js

Usage

Genarally, you can use the library like this.

import SmoothScroll from '@dilane3/smoothscroll-js';

Then you can use it in your application:

// Wrapper element for smooth scrolling
const wrapper = document.querySelector('.wrapper');

// Smooth scroll option
const options = {
  direction: 'v',
  smooth: 0.08
}

// Initialization
new SmoothScroll(wrapper, options);

For React App

Especialy for React App, you can use the library like this.

import SmoothScroll from '@dilane3/smoothscroll-js';

Then you can use it in your application:

// Create a component for smooth scrolling
const App = () => {
  const wrapper = useRef(null);

  useEffect(() => {
    const options = {
      direction: 'v',
      smooth: 0.08
    }

    new SmoothScroll(wrapper.current, options);
  } , []);

  return (
    <div ref={wrapper} className="wrapper">
      <div className="content">
        <h1>Hello World</h1>
        <p>This is a paragraph</p>
      </div>
    </div>
  );
}

Parameters

The constructor of SmoothScroll accepts the following parameters.

| Parameter | Type | Description | | --------- | ----------- | ----------- | | wrapper | HTMLElement | The wrapper element for smooth scrolling | | options | Object | The options for smooth scrolling |

Options parameters

| Parameter | Type | Description | | --------- | --------------- | ----------- | | direction | 'v' or 'v-' | The direction of smooth scrolling | | smooth | Number | The smooth value of smooth scrolling |

License

ISC License

Copyright (c) 2022 Dilane3