Implement Silky Smooth Scrolling in react JS

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👇

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) 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, 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👇

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,

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.

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.

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