Scrollbar-React-Component

Scrollbar-track is a React Componet can help you create a scrollbar which can track specific class, or just divide the scrollbar into some small ones. Scrollbar have a 'onPageChange' event to help watch the page change. User can custom the function when scrollbar rich the end.

Before Use:

import {Scrollbar, Thumb} from './scrollbar/ScrollbarApp' import styles from './scrollbar.css' style-loader and css-loadedr are necessary. jQuery is necessary

How to Use:

<Scrollbar/> or

<Scrollbar>
  <Thumb/>
  <Thumb>
<Scrollbar>

property for Scrollbar:

1. pageNum: Number.

Defined how many thumbs on Scrollbar. eg: <Scrollbar pageNum = "4"/>

2. traceClass: String.

Define the class name the thumb should bind. eg: <Scrollbar traceClass = ".pages"/>

3. onPageChange: function.

Define the function call when thumb rich the top or end. eg: <Scrollbar pageNum = "4" onPageChange= { function(){console.log("Page Change")} }/>

4. offTop/ offBottom: Number

Define the height which thumb off top/Bottom. Alert: The unit for the value is "vh". eg:<Scrollbar offTop = "2" offBottom = "4">

5. thumbHeight : Number

Define the distance between thumbs. Alert: The unit for the value is "vh". eg: <Scrollbar thumbHeight = "5">

Property for Thumb

1. scale: Number

Define the height scale for single thumb. eg. <Thumb scale = "2"/ >

Dependency:

"devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.11",
    "jquery": "^3.3.1",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "style-loader": "^0.21.0",
    "webpack": "^4.12.0",
    "webpack-command": "^0.2.1"
  }