smooth-scrollbar-react

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