react-responsive-scrollbox

react-responsive-scrollbox

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

Notification

• 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:

• use style prop.

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

• 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>