scrollbar-cxd v1.0.1
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"
}
6 years ago