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