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
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 =>Your content here</ScrollBox>
- use CSS class.
<ScrollBox ="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:
<ScrollBox ="green-bg">Your content here</ScrollBox>