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

A

Auto scroll to a specify element every time open webpage by Javascript

H

How to scroll to top every time React router change?

G

Get height or width of an element in Javascript

T

The way to separate logic code of the Vuejs component into smaller files

C

Convert HTML raw string to DOM Nodes in Javascript

P

Pass the value of only one argument that you don't want to change the value of the rest argument

Related

H

How to scroll to top every time React router change?

A

Add and remove scroll event for window in the React App

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?

© 2019 4codev

Created with love by Sil.