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";
<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:
<ScrollBox style={{ height: "100px" }}>Your content here.</ScrollBox>
.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.
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>