1.0.2 • Published 2 years ago
@dilane3/smoothscroll-js v1.0.2
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