Make a React custom scrollbar component

Today we'll learn about how to create a React custom scrollbar component with a little bit of CSS codes



Make it easy follow step by step below:

1 - Create a CustomScrollBar component to re-use it whenever you want:


2 - Add custom scrollbar css into styles.css file: 

 .scrollbar {
  float: left;
  background: #f9f9f9;
  overflow-y: scroll;
}

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

.custom-scrollbar::-webkit-scrollbar {
  width: 12px;
  background-color: #f9f9f9;
}

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


3 - Import the component into your app:


Note: the contentWidth is optional, if you pass it, the horizontal scrollbar will be display

4 - finally, enjoy your result on the browser

custom scrollbarreactscrollbar component

Latest

C

Create a Caro pattern background with HTML and CSS

C

Create three columns layout with the same width and height use CSS flexbox

S

Show pretty git log graphs in command line

S

Select only Odd or Even elements by CSS

H

How to run a npm script before run build in package.json ?

A

Auto redirect to another web page with Javascript

Related

R

Run function or script only once inside useEffect React

H

How to add Google Analytics to the React App?

H

How to add Google AdSense to your React application?

H

How to use "this" of a React Component from outside?

R

Render the HTML raw in React app

© 2019 4codev

Created with love by Sil.