aGuideHub

How to create scroll bar in react js?

March 31, 2023

Hi Friends 👋,

Welcome To aGuideHub!

To create scroll bar in React js, you have to use any scroll bar package library or you have to write a custom scroll bar component. It will create scroll bar in react js.

Today, I am going to show you, how to create scroll bar in react js.

Table of contents

  • Set up the React project.
  • Import necessary components.
  • Create the scroll bar component.

Let’s start with the first step.

Step 1: Set up the React project.

First you have to install the React project. You should use create-react-app command to create a new React project.

npx create-react-app my-app
cd my-app
npm start

Step 2: Import necessary components.

You have to import the react component, which you can use in your React component. and import styles.css.

import React from "react";
import "./styles.css";

Step 3: Create the scroll bar component.

To create a scroll bar. It is a block of HTML code that defines a container with scrollbars. The container is identified by the wrapper id attribute. 

<div id="wrapper">
    <div class="scrollbar" id="style-default">
      <div class="force-overflow"></div>
    </div>
</div>

ReactJS create scroll bar example.

In this example, we have shown many scroll bars in which each one has a different design like, The border of the scroll bar has to be radius, the color has to be changed, etc.

App.js

import React from "react";
import "./styles.css";

function App() {
  return (
    <div id="wrapper">
      <div class="scrollbar" id="style-default">
        <div class="force-overflow"></div>
      </div>

      <div class="scrollbar" id="style-1">
        <div class="force-overflow"></div>
      </div>

      <div class="scrollbar" id="style-2">
        <div class="force-overflow"></div>
      </div>

      <div class="scrollbar" id="style-3">
        <div class="force-overflow"></div>
      </div>

      <div class="scrollbar" id="style-4">
        <div class="force-overflow"></div>
      </div>

      <div class="scrollbar" id="style-5">
        <div class="force-overflow"></div>
      </div>

      <div class="scrollbar" id="style-6">
        <div class="force-overflow"></div>
      </div>

      <div class="scrollbar" id="style-7">
        <div class="force-overflow"></div>
      </div>

      <div class="scrollbar" id="style-8">
        <div class="force-overflow"></div>
      </div>

      <div class="scrollbar" id="style-9">
        <div class="force-overflow"></div>
      </div>

      <div class="scrollbar" id="style-10">
        <div class="force-overflow"></div>
      </div>

      <div class="scrollbar" id="style-11">
        <div class="force-overflow"></div>
      </div>

      <div class="scrollbar" id="style-13">
        <div class="force-overflow"></div>
      </div>

      <div class="scrollbar" id="style-14">
        <div class="force-overflow"></div>
      </div>

      <div class="scrollbar" id="style-15">
        <div class="force-overflow"></div>
      </div>
    </div>
  );
}

export default App;
header {
  font-family: "Lobster", cursive;
  text-align: center;
  font-size: 25px;
}

#info {
  font-size: 18px;
  color: #555;
  text-align: center;
  margin-bottom: 25px;
}

a {
  color: #074e8c;
}

.scrollbar {
  margin-left: 30px;
  float: left;
  height: 300px;
  width: 65px;
  background: #f5f5f5;
  overflow-y: scroll;
  margin-bottom: 25px;
}

.force-overflow {
  min-height: 450px;
}

#wrapper {
  text-align: center;
  width: 500px;
  margin: auto;
}

/*
 *  STYLE 1
 */

#style-1::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #f5f5f5;
}

#style-1::-webkit-scrollbar {
  width: 12px;
  background-color: #f5f5f5;
}

#style-1::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #555;
}

/*
 *  STYLE 2
 */

#style-2::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #f5f5f5;
}

#style-2::-webkit-scrollbar {
  width: 12px;
  background-color: #f5f5f5;
}

#style-2::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #d62929;
}

/*
 *  STYLE 3
 */

#style-3::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #f5f5f5;
}

#style-3::-webkit-scrollbar {
  width: 6px;
  background-color: #f5f5f5;
}

#style-3::-webkit-scrollbar-thumb {
  background-color: #000000;
}

/*
 *  STYLE 4
 */

#style-4::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #f5f5f5;
}

#style-4::-webkit-scrollbar {
  width: 10px;
  background-color: #f5f5f5;
}

#style-4::-webkit-scrollbar-thumb {
  background-color: #000000;
  border: 2px solid #555555;
}

/*
 *  STYLE 5
 */

#style-5::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #f5f5f5;
}

#style-5::-webkit-scrollbar {
  width: 10px;
  background-color: #f5f5f5;
}

#style-5::-webkit-scrollbar-thumb {
  background-color: #0ae;

  background-image: -webkit-gradient(
    linear,
    0 0,
    0 100%,
    color-stop(0.5, rgba(255, 255, 255, 0.2)),
    color-stop(0.5, transparent),
    to(transparent)
  );
}

/*
 *  STYLE 6
 */

#style-6::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #f5f5f5;
}

#style-6::-webkit-scrollbar {
  width: 10px;
  background-color: #f5f5f5;
}

#style-6::-webkit-scrollbar-thumb {
  background-color: #f90;
  background-image: -webkit-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
}

/*
 *  STYLE 7
 */

#style-7::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #f5f5f5;
  border-radius: 10px;
}

#style-7::-webkit-scrollbar {
  width: 10px;
  background-color: #f5f5f5;
}

#style-7::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.44, rgb(122, 153, 217)),
    color-stop(0.72, rgb(73, 125, 189)),
    color-stop(0.86, rgb(28, 58, 148))
  );
}

/*
 *  STYLE 8
 */

#style-8::-webkit-scrollbar-track {
  border: 1px solid black;
  background-color: #f5f5f5;
}

#style-8::-webkit-scrollbar {
  width: 10px;
  background-color: #f5f5f5;
}

#style-8::-webkit-scrollbar-thumb {
  background-color: #000000;
}

/*
 *  STYLE 9
 */

#style-9::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #f5f5f5;
}

#style-9::-webkit-scrollbar {
  width: 10px;
  background-color: #f5f5f5;
}

#style-9::-webkit-scrollbar-thumb {
  background-color: #f90;
  background-image: -webkit-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
}

/*
 *  STYLE 10
 */

#style-10::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #f5f5f5;
  border-radius: 10px;
}

#style-10::-webkit-scrollbar {
  width: 10px;
  background-color: #f5f5f5;
}

#style-10::-webkit-scrollbar-thumb {
  background-color: #aaa;
  border-radius: 10px;
  background-image: -webkit-linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(0, 0, 0, 0.2) 50%,
    rgba(0, 0, 0, 0.2) 75%,
    transparent 75%,
    transparent
  );
}

/*
 *  STYLE 11
 */

#style-11::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #f5f5f5;
  border-radius: 10px;
}

#style-11::-webkit-scrollbar {
  width: 10px;
  background-color: #f5f5f5;
}

#style-11::-webkit-scrollbar-thumb {
  background-color: #3366ff;
  border-radius: 10px;
  background-image: -webkit-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.5) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0.5) 75%,
    transparent 75%,
    transparent
  );
}

/*
 *  STYLE 12
 */

#style-12::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.9);
  border-radius: 10px;
  background-color: #444444;
}

#style-12::-webkit-scrollbar {
  width: 12px;
  background-color: #f5f5f5;
}

#style-12::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #d62929;
  background-image: -webkit-linear-gradient(
    90deg,
    transparent,
    rgba(0, 0, 0, 0.4) 50%,
    transparent,
    transparent
  );
}

/*
 *  STYLE 13
 */

#style-13::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.9);
  border-radius: 10px;
  background-color: #cccccc;
}

#style-13::-webkit-scrollbar {
  width: 12px;
  background-color: #f5f5f5;
}

#style-13::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #d62929;
  background-image: -webkit-linear-gradient(
    90deg,
    transparent,
    rgba(0, 0, 0, 0.4) 50%,
    transparent,
    transparent
  );
}

/*
 *  STYLE 14
 */

#style-14::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6);
  background-color: #cccccc;
}

#style-14::-webkit-scrollbar {
  width: 10px;
  background-color: #f5f5f5;
}

#style-14::-webkit-scrollbar-thumb {
  background-color: #fff;
  background-image: -webkit-linear-gradient(
    90deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 25%,
    transparent 100%,
    rgba(0, 0, 0, 1) 75%,
    transparent
  );
}

/*
 *  STYLE 15
 */

#style-15::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #f5f5f5;
  border-radius: 10px;
}

#style-15::-webkit-scrollbar {
  width: 10px;
  background-color: #f5f5f5;
}

#style-15::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #fff;
  background-image: -webkit-gradient(
    linear,
    40% 0%,
    75% 84%,
    from(#4d9c41),
    to(#19911d),
    color-stop(0.6, #54de5d)
  );
}

/*
 *  STYLE 16
 */

#style-16::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #f5f5f5;
  border-radius: 10px;
}

#style-16::-webkit-scrollbar {
  width: 10px;
  background-color: #f5f5f5;
}

#style-16::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #fff;
  background-image: -webkit-linear-gradient(
    top,
    #e4f5fc 0%,
    #bfe8f9 50%,
    #9fd8ef 51%,
    #2ab0ed 100%
  );
}

Check the output of the above code example.

React, scroll-bar

Here, we are provided code sandbox links for the above program create scroll bar in React js. Then you can use whenever you went and do the changes as per your requirements.

Try it Yourself

All the best 👍

Premium Content

You can get all the below premium content directly in your mail when you subscribe us

Books

Interview Questions

Soon You will get CSS, JavaScript, React Js, and TypeScript So Subscribe to it.

Portfolio Template

View | Get Source Code

Cheat Sheets

Cheat Sheets Books are basically Important useful notes which we use in our day-to-day life.

Related Posts