Smoothscroll-js
A simple smooth scroll library for JavaScript.
Advantages
- Easy to use
- Lightweight
- Fast
- Cross-browser
- Customizable
Installation
npm install @dilane3/smoothscroll-jsor
yarn add @dilane3/smoothscroll-jsUsage
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