scroll-view-bar

Scroll bar with thumbnail background, similar to vscode side navigation

• Support for listening to the status of the scrollbar being generated
• Support custom scrollbar styles

Installation

npm install scroll-view-bar --save

Usage

import ScrollViewBar from 'scroll-view-bar';

export default () => (
  <ScrollViewBar style={{height:300}} trigger={'滚动导航'} delay={0}>
    <div>content<div>
  </ScrollViewBar>
);

API

| Property | Type | Default | Description | | ---------- | ----------------------------------------------------------------------------------------- | ----------------- | --------------------------------------------------------------------------------- | | prefixCls | String | scroll-view-bar | prefixCls of this component | | trigger | React.ReactNode | scroll navigation | When the mouse hovers over the hover-button, trigger the scroll bar display | | delay | number | 2000 | The delay in first loading the background image | | observable | boolean | false | Whether to enable content change monitoring for updating the scrollbar background | | trackWidth | number | 160 | scroll-track width | | trackStyle | CSSProperties | scroll-view-bar | customize track style | | thumbStyle | CSSProperties | scroll-view-bar | customize thumb style | | onUpdate | (value: {top: number;scrollTop: number;scrollHeight: number;clientHeight: number;})=>void | | call when scrolling |

Development

# install dependencies
$ npm install

# develop library by docs demo
$ npm start

# build library source code
$ npm run build

# build library source code in watch mode
$ npm run build:watch

# build docs
$ npm run docs:build

# check your project for potential problems
$ npm run doctor

LICENSE

MIT