react-responsive-scrollbox

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

Notification

1. React version should be above 16.8.0.

Code demo

CodeSandbox

Install

npm install --save react-responsive-scrollbox

Usage

import ScrollBox from "react-responsive-scrollbox";

// Just wrap the content.
<ScrollBox>Your content here.</ScrollBox>;

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.

<ScrollBox style={{ height: "100px" }}>Your content here.</ScrollBox>

2. use CSS class.

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

<ScrollBox className="addtional-style">Your content here.</ScrollBox>

Style the scrollbar

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:

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

<ScrollBox className="green-bg">Your content here.</ScrollBox>