smooth-scrollbar-react

A wrapper for smooth-scrollbar to React Component.

Demo

https://codesandbox.io/s/smooth-scrollbar-react-4pu86

Installation

$ yarn add smooth-scrollbar smooth-scrollbar-react

Usage

import {Scrollbar} from 'smooth-scrollbar-react';

<Scrollbar
  damping={number}
  thumbMinSize={number}
  renderByPixels={boolean}
  alwaysShowTracks={boolean}
  continuousScrolling={boolean}
  wheelEventTarget={element}
  plugins={object}
  onScroll={func}>
  your contents here...
</Scrollbar>

Available Options

| parameter | type | default | description | | :-----------------: | :-------: | :-----: | :------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 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). | | thumbMinSize | number | 20 | Minimal size for scrollbar thumbs. | | renderByPixels | boolean | true | Render every frame in integer pixel values, set to true to improve scrolling performance. | | alwaysShowTracks | boolean | false | Keep scrollbar tracks visible. | | continuousScrolling | boolean | true | Set to true to allow outer scrollbars continue scrolling when current scrollbar reaches edge. | | plugins | object | {} | Options for plugins, see Plugin System. |
Confusing with the option field? Try edit tool here!

Examples

Original code:

function App() {
  return (
    <div className='App'>
      <div className='list-data'>
        {[...Array(20).keys()].map((value, index) => (
          <div key={index}>{value + index}</div>
        ))}
      </div>
    </div>
  );
}

Option 1:

import {Scrollbar} from 'smooth-scrollbar-react';

function App() {
  return (
    <div className='App'>
      <Scrollbar
        plugins={{
          overscroll: {
            effect: 'bounce',
          },
        }}>
        <div className='list-data' style={{height: '200px'}}>
          {[...Array(20).keys()].map((value, index) => (
            <div key={index}>{value + index}</div>
          ))}
        </div>
      </Scrollbar>
    </div>
  );
}

Option 2: Recommended(Using display: flex)

import {Scrollbar} from 'smooth-scrollbar-react';

function App() {
  return (
    <div className='App'>
      <div className='list-data' style={{display: 'flex', maxHeight: '200px'}}>
        <Scrollbar
          plugins={{
            overscroll: {
              effect: 'glow',
            },
          }}>
          {[...Array(20).keys()].map((value, index) => (
            <div key={index}>{value + index}</div>
          ))}
        </Scrollbar>
      </div>
    </div>
  );
}

License

MIT