styled-scrollbar

styled-scrollbar helps you make customized(color, width, ...) scrollbars in react projects!

Quick start

First, run this command in your react app:

npm install styled-scrollbar

for your app.

Then:

import { ScrollbarX } from "styled-scrollbar";

Horizontal scrollbar:

//parent element
<ScrollbarX h={3} w={95}>
  //element that is scrollable👇🏽
  <div>
    //...items in scrolled element
  </div>
</ScrollbarX>

Vertical scrollbar:

<ScrollbarY w={4} h={300}>
  //element that is scrollable👇🏽
  <div>
    //...items in scrolled element
  </div>
</ScrollbarY>

---

components:

Scrollbar	component
Horizontal	ScrollbarX
Vertical	ScrollbarY

---

Component Props guide:

---

color Props:

Prop	default	data type	meaning
trackColor	#cecece	string	color of scrollbar background
thumbColor	#555	string	color of scrollbar thumb

size Props:

Prop	data type	meaning
w	number	width of scrollbar
h	number	height of scrollbar
r	number	borderRadius of scrollbar

type	default width	default height	default bRadius
ScrollbarX	prevEl width	6px	2px
ScrollbarY	6px	prevEl height	2px

New update 3.0.2 :

now in version 3.0.2 you can give style for wraper, track and thumb by passing their own styles that you like not only the colors and sizes!

Prop	default	data type	meaning
thumbStyle	{}	object	styles applid on thumb of scrollbar
trackStyle	{}	object	styles applid on track of scrollbar
wraperStyle	{}	object	styles applid on wraper of scrollbar and scolling element

example:

  <ScrollbarY
      wraperStyle={{ display: 'flex', flexDirection: 'row-reverse' }}
      trackStyle={{ margin: '0 5px' }}
      >
      ...
  </ScrollbarY>