Check out the custom scrollbar example here.
Install the package using npm:
npm install my-custom-scrollbar
To hide the existing scrollbar, add the following CSS to your stylesheet:
body {
scrollbar-width: none; /_ Firefox _/
}
::-webkit-scrollbar {
display: none;
}Simply import and use the Scroll component inside your app:
import Scroll from 'my-custom-scrollbar';
function App() {
return (
<div>
{/_ Your other components _/}
<Scroll color="red" />
</div>
);
}You can customize the scrollbar color by changing the color prop.