Implement Silky Smooth Scrolling in react JS
Tags: react, webdev, javascript, tutorial
Published: 2021-09-14 12:33:54

Hi There 👋,
 
In this tutorial we're going to implement smooth🧈 scrolling effect🤩 for whole page with custom scrollbar in ReactJS.

Here is the demo👇
https://react-smooth-scroll.vercel.app/
(This might load slower initially due to loading of lot's of images)

Now let's get started!

If you prefer the video format then here is the video👇
{% youtube x5yvDlH7X9A %}

If you're not the beginner and want to implement smooth scrolling in your project you can directly go to the step 2.

### STEP 0: Project Initialization

Open your command prompt.

Create your project directory using below command.
```
npx create-react-app react-smoothscroll
```
>Create React App ([CRA](https://create-react-app.dev/)) is an officially supported way to create single-page React applications. It offers a modern build setup with no configuration.

This will create and react app starter and install all the required dependencies for React.

For this project we're going to use [smooth-scrollbar](https://idiotwu.github.io/smooth-scrollbar/), So let's install it,

```
npm install smooth-scrollbar
```
Now let's start our project server,
write,
```
npm start
```
This will start server on port 3000. 

### STEP 1: Add random Images

First of all clean up your `App.js` file and remove header section.

Now before implementing smooth scroll, we need some content to display in the app.

For this we can render few images one by one, 
You can obtain various images from here: https://picsum.photos/

Go to given url and scroll down to list images.
https://picsum.photos/v2/list
> Visit this url in your browser and see it's response
This url will gives us a list of url for images.

So let's call this url and render a few images.

Open `App.js` file and write below code👇

{% gist https://gist.github.com/codebucks27/86b9e439c07906340f31a602707f7018 %}

**Line no:6** 👉 Here I have initialized a state `images` to store images.

**Line no:8** 👉 In the `useEffect` i have fetched the url which provides us image data in JSON format. After converting response (res) to JSON we will set images state with this JSON data.

Format of JSON data:
```
[
    {
        "id": "0",
        "author": "Alejandro Escamilla",
        "width": 5616,
        "height": 3744,
        "url": "https://unsplash.com/...",
        "download_url": "https://picsum.photos/..."
    }
]
```
**Line no:25** 👉 In the return statement, we will render images when images state is not undefined using map function. 
Here all images are wrapped inside the div with the class image container.
> To keep images scattered on the whole page I have used random function to set it's margin randomly. (As you saw in the demo page)

**Line no:27** 👉 Pass  download_url in the src and pass author in the alt tag.

Write below code for the css in the `App.css` file.
```
.App {
display:flex;
flex-direction: column;
padding:5rem;
}

.title{
  text-transform: uppercase;
  align-self: center;
  margin-bottom:8rem;
  font-size:4vw;
}

.imgContainer{
  max-width:50vw;
  margin:4rem 0;
}

img{
  width:100%;
  height:auto;
}
```


### STEP 2: Implementing smooth scrolling

Create components folder in the src.

In the component folder create file called SmoothScroll.js

Write below code,
```
  const Scroll = () => {

    return null;
}

export default Scroll;
```
Import scrollbar from smooth-scrollbar.

```
import Scrollbar from 'smooth-scrollbar';
```
Let's initialize it in the useEffect.

Below is the syntax to add smooth-scrollbar,

```
Scrollbar.init(document.querySelector('#my-scrollbar'), options);
```
In the init function pass the element where you want to implement smooth scrolling.

In the second argument you can pass various options which are listed [here](https://github.com/idiotWu/smooth-scrollbar/tree/49f4ee4543019cf65a6107e092f834a247c2652c/docs#available-options-for-scrollbar),

You can also try different options in this live demo,
https://idiotwu.github.io/smooth-scrollbar/
 

Now Let's Add this in the scroll component.

```
const options = {
    damping : 0.07,
  }

    useEffect(() => {

    Scrollbar.init(document.body, options);   

    return () => {
       if (Scrollbar) Scrollbar.destroy(document.body)
    }  },[])

```
In the useEffect, we want to create smooth scrolling in the whole page so pass **document.body** in the first argument.

While in the second argument pass options which we have defined already.

In the return of useEffect,
when component unmounts we will destroy the Scrollbar instance using `destroy()` method.

Import scroll component in the `App.js` file as shown below,

```
...
  return (
    <div className="App">
      <h1 className="title">React Smooth Scroll</h1>
      <Scroll /> {/*👈 Like this*/}
   ...
```
Now we have to set height and width of the body otherwise this will not work.

open `index.css` file and add height and width in the body.
```
body {
  margin: 0;
  height:100vh;
  width:100vw;
}
```
As you can see now it's working🤩



### STEP 3: Add Overscroll Plugin 

Now if you want and effect of glow or bounce when someone hit the scroll ends, then you should implement Overscroll plugin.

open `SmoothScroll.js` file, and import this plugin from smooth-scrollbar.

```
import OverscrollPlugin from 'smooth-scrollbar/plugins/overscroll';
```
See below code and explanation.

{% gist https://gist.github.com/codebucks27/26c8fba6dbb574032a0d802080578761 %}

**Line no:8** 👉 Overscroll plugin options

**Line no:27** 👉 Adding Overscroll plugin and it's options in the main options object.

**Line no:37** 👉 Here we have used *Scrollbar.use()* method to use Overscroll plugin. 

That's it. Now you can see smooth bounce when scrollbar hits the ends.

> If you want to implement glow effect just uncomment the code from the line no 16 and comment out the current overscroll options.

You can use various methods provided by this library from [here](https://github.com/idiotWu/smooth-scrollbar/blob/49f4ee4543019cf65a6107e092f834a247c2652c/docs/api.md#table-of-contents).

Full Code for this tutorial 👉 https://github.com/codebucks27/react-smooth-scroll 

If you have any question just ask in the comments😉

Click on below link🤩 to get more resources💻 (Weekly Updates)👇
https://linktr.ee/codebucks

### Thanks For Reading😄

Feel free to visit my youtube channel: 
####[@CodeBucks](https://www.youtube.com/channel/UCeYt6blRBKuNrEg_-282fSA)