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

© 2019 4codev

Created with love by Sil.