1.0.2 • Published 2 years ago

@dilane3/smoothscroll-js v1.0.2

Weekly downloads
-
License
ISC
Repository
github
Last release
2 years ago

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.

ParameterTypeDescription
wrapperHTMLElementThe wrapper element for smooth scrolling
optionsObjectThe options for smooth scrolling

Options parameters

ParameterTypeDescription
direction'v' or 'v-'The direction of smooth scrolling
smoothNumberThe smooth value of smooth scrolling

License

ISC License

Copyright (c) 2022 Dilane3