search

nghiepdev / smooth-scrollbar-react

A wrapper for smooth-scrollbar to React Component.
https://codesandbox.io/s/smooth-scrollbar-react-4pu86
MIT License
40 stars 5 forks source link
react scrolling smooth-scrolling

readme

SMOOTH-SCROLLBAR-REACT

A wrapper for smooth-scrollbar to React Component.

NPM version NPM monthly download

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