react-responsive-scrollbox v1.0.11

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.

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>