1 | # react-smooth-scrollbar
|
2 |
|
3 | [smooth-scrollbar](https://github.com/idiotWu/smooth-scrollbar) for react projects.
|
4 |
|
5 | ## Requirements
|
6 |
|
7 | React 0.14+
|
8 |
|
9 | ## Install
|
10 |
|
11 | ```
|
12 | npm install react-smooth-scrollbar smooth-scrollbar --save
|
13 | ```
|
14 |
|
15 | ## Demo
|
16 |
|
17 | [http://idiotwu.github.io/react-smooth-scrollbar/](http://idiotwu.github.io/react-smooth-scrollbar/)
|
18 |
|
19 | ## Usage
|
20 |
|
21 | ```js
|
22 | import React from 'react';
|
23 | import ReactDOM from 'react-dom';
|
24 | import Scrollbar from 'react-smooth-scrollbar';
|
25 |
|
26 | class App extends React.Component {
|
27 | render() {
|
28 | return (
|
29 | <Scrollbar
|
30 | damping={number},
|
31 | thumbMinSize={number},
|
32 | syncCallbacks={boolean},
|
33 | renderByPixels={boolean},
|
34 | alwaysShowTracks={boolean},
|
35 | continuousScrolling={boolean},
|
36 | wheelEventTarget={element},
|
37 | plugins={object},
|
38 | onScroll={func},
|
39 | >
|
40 | your contents here...
|
41 | </Scrollbar>
|
42 | );
|
43 | }
|
44 | }
|
45 |
|
46 | ReactDOM.render(<App />, document.body);
|
47 | ```
|
48 |
|
49 | ### Available Options
|
50 |
|
51 | | parameter | type | default | description |
|
52 | | :--------: | :--: | :-----: | :---------- |
|
53 | | damping | `number` | `0.1` | Momentum reduction damping factor, a float value between `(0, 1)`. The lower the value is, the more smooth the scrolling will be (also the more paint frames). |
|
54 | | thumbMinSize | `number` | `20` | Minimal size for scrollbar thumbs. |
|
55 | | renderByPixels | `boolean` | `true` | Render every frame in integer pixel values, set to `true` to improve scrolling performance. |
|
56 | | alwaysShowTracks | `boolean` | `false` | Keep scrollbar tracks visible. |
|
57 | | continuousScrolling | `boolean` | `true` | Set to `true` to allow outer scrollbars continue scrolling when current scrollbar reaches edge. |
|
58 | | wheelEventTarget | `EventTarget` | `null` | Element to be used as a listener for mouse wheel scroll events. By default, the container element is used. This option will be useful for dealing with fixed elements. |
|
59 | | plugins | `object` | `{}` | Options for plugins, see [Plugin System](https://github.com/idiotWu/smooth-scrollbar/blob/master/docs/plugin.md). |
|
60 |
|
61 |
|
62 | **Confusing with the option field? Try edit tool [here](http://idiotwu.github.io/smooth-scrollbar/)!**
|
63 |
|
64 | ## Using Scrollbar Plugins
|
65 |
|
66 | ```js
|
67 | import { Component } from 'react';
|
68 | import PropTypes from 'prop-types';
|
69 | import SmoothScrollbar from 'smooth-scrollbar';
|
70 | import OverscrollPlugin from 'smooth-scrollbar/plugins/overflow';
|
71 | import Scrollbar from 'react-smooth-scrollbar';
|
72 |
|
73 | SmoothScrollbar.use(OverscrollPlugin);
|
74 |
|
75 | class App2 extends Component {
|
76 | render() {
|
77 | return (
|
78 | <Scrollbar> ... </Scrollbar>
|
79 | );
|
80 | }
|
81 | }
|
82 | ```
|
83 |
|
84 | ## Get Scrollbar Instance
|
85 |
|
86 | 1. Use `ref` in **parent component**:
|
87 |
|
88 | ```javascript
|
89 | class Parent extends React.Component {
|
90 | componentDidMount() {
|
91 | const { scrollbar } = this.$container;
|
92 | }
|
93 |
|
94 | render() {
|
95 | return (
|
96 | <Scrollbar ref={c => this.$container = c}>
|
97 | your content...
|
98 | </Scrollbar>
|
99 | );
|
100 | }
|
101 | }
|
102 | ```
|
103 |
|
104 | 2. Use `Context` in **child component**:
|
105 |
|
106 | ```javascript
|
107 | class Child extends React.Component {
|
108 | static contextTypes = {
|
109 | getScrollbar: React.PropTypes.func
|
110 | };
|
111 |
|
112 | componentDidMount() {
|
113 | this.context.getScrollbar((scrollbar) => {
|
114 | // ...
|
115 | });
|
116 | }
|
117 |
|
118 | render() {
|
119 | return <div> this is child component. </div>;
|
120 | }
|
121 | }
|
122 |
|
123 | class App extends React.Component {
|
124 | render(){
|
125 | return (
|
126 | <Scrollbar>
|
127 | <Child />
|
128 | </Scrollbar>
|
129 | );
|
130 | }
|
131 | }
|
132 | ```
|
133 |
|
134 |
|
135 | ## APIs
|
136 |
|
137 | [Documents](https://github.com/idiotWu/smooth-scrollbar/docs)
|
138 |
|
139 | ## License
|
140 |
|
141 | MIT.
|
142 |
|
143 | [![Sponsor](https://app.codesponsor.io/embed/haJ2RqCqwBLZtPKnMNBYgn4M/idiotWu/react-smooth-scrollbar.svg)](https://app.codesponsor.io/link/haJ2RqCqwBLZtPKnMNBYgn4M/idiotWu/react-smooth-scrollbar)
|