react-responsive-scrollbox

An util component for react to create a responsive scrollable area with customizable scrollbar.

$3

1. React version should be above 16.8.0.

$3

CodeSandbox

$3

``
npm install --save react-responsive-scrollbox
`

$3

`jsx
import ScrollBox from "react-responsive-scrollbox";

// Just wrap the content.
Your content here.;
`

The ScrollBox will responsively take up all the space of its parent element by default (width: 100%, height: 100%). You can change this behavior by adding additional styles:

1. use style prop.

`jsx
Your content here.
`

2. use CSS class.

`css
.addtional-style {
width: 200px;
height: 300px;
}
`

`jsx
Your content here.
`

$3

Every item of the scrollbar in ScrollBox has its own CSS class name, so you can use CSS selector to choose and customize the item you want.

| Item | CSS selector |
| -------------------------- | ------------------------------ |
| all scrollbar track | .scroll-box-track |
| vertical scrollbar track | .scroll-box-track.vertical |
| horizontal scrollbar track | .scroll-box-track.horizontal |
| all scrollbar thumb | .scroll-box-thumb |
| vertical scrollbar thumb | .scroll-box-thumb.vertical |
| horizontal scrollbar thumb | .scroll-box-thumb.horizontal |

For example, if you want to change the background color of vertical scrollbar track to green:

`css
.green-bg .scroll-box-track.vertical {
background-color: green;
}
`

`jsx
Your content here.
``