New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

react-responsive-scrollbox

Package Overview
Dependencies
Maintainers
1
Versions
12
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-responsive-scrollbox

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

1.0.11
latest
Source
npm
Version published
Weekly downloads
2
-66.67%
Maintainers
1
Weekly downloads
 
Created
Source

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.

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

Keywords

react

FAQs

Package last updated on 15 Apr 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts