React-free-scrollbar


A react module for creating customizable scroll area.

Visit http://fuermosi777.github.io/react-free-scrollbar/ to see demo.

Install

$ npm install --save react-free-scrollbar

or

$ yarn add react-free-scrollbar

Usage

$3

import FreeScrollBar from 'react-free-scrollbar';

// must have a wrapper with a certain size

Props

$3

Add custom class to the scroller. If you add a custom className to the component, all default styles will not working. You have to also add the following styles in your CSS files:

// if you add "demo" as the custom class
.demo {} // optional
.demo-vertical-track {} // required
.demo-horizontal-track {} // required
.demo-vertical-handler {} // required
.demo-horizontal-handler {} // required

$3

If you just want to add some simple styles, you can pass this prop to the component.

Example:

$3

You can pass fixed to decide if handler's position: fixed or static. If fixed equals true, then the handler will overlap the content inside the scroller.

$3

Set true if you want a macOS style auto-hide scroller.

$3

The time length of the handler disappears. Default: 2000

$3

The width of the vertical handler or the height of the horizontal handler. Default: 10px

$3

The starting position of the scroll area, can be descriptive string or an object.

Options: "bottom", "bottom right", "top right", "right", {top: 20, left: 30}

$3

The browser scroll bar width. Default: "17px". It should fit for most browsers.

$3

Fired when the scrollbar is scrolled.

$3

This timeout adds a throttle for onScrollbarScroll. Default is 300. Set to 0 to remove throttle.

Methods

$3

Customization

Adding a custom className to the component will give you power to customize the scrollbar's track and handler. Here is an example:

/ the following code snippet is using Less /
.example-vertical-track {
background-color: transparent;
width: 10px;
transition: opacity 0.3s;
}

.example-horizontal-track {
background-color: transparent;
height: 10px;
transition: opacity 0.3s;
}

.example-vertical-handler {
width: 8px;
right: 1px;
border-radius: 4px;
background-color: rgba(0, 0, 0, 0.5);
transition: opacity 0.3s;
&:hover {
background-color: rgba(0, 0, 0, 0.8);
}
}

.example-horizontal-handler {
height: 8px;
bottom: 1px;
border-radius: 4px;
background-color: rgba(0, 0, 0, 0.5);
transition: opacity 0.3s;
&:hover {
background-color: rgba(0, 0, 0, 0.8);
}
}

For more examples, go to http://fuermosi777.github.io/react-free-scrollbar/.

Develop

$ yarn dev

Go to http://localhost:8080.

Publish

$ yarn dist
$ npm publish