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:
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

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
Latest
© 2019 4codev
Created with love by Sil.