awesome-react-scrollbars
- Add fixOffsetHeight: number pass from property to fix bugs when content with dynamic height
- Add fixOffsetWidth: number pass from property to fix bugs when content with dynamic width
- frictionless native browser scrolling
- native scrollbars for mobile devices
- fully customizable
- auto hide
- auto height
- universal (runs on client & server)
requestAnimationFrame
for 60fps- no extra stylesheets
- well tested, 100% code coverage
Installation
npm install react-custom-scrollbars --save
This assumes that you’re using npm package manager with a module bundler like Webpack or Browserify to consume CommonJS modules.
If you don’t yet use npm or a modern module bundler, and would rather prefer a single-file UMD build that makes ReactCustomScrollbars
available as a global object, you can grab a pre-built version from unpkg. We don’t recommend this approach for any serious application, as most of the libraries complementary to react-custom-scrollbars
are only available on npm.
Usage
This is the minimal configuration. Check out the Documentation for advanced usage.
; { return <Scrollbars style= width: 500 height: 300 > <p>Some great content...</p> </Scrollbars> ; }
The <Scrollbars>
component is completely customizable. Check out the following code:
; { return <Scrollbars onScroll=thishandleScroll onScrollFrame=thishandleScrollFrame onScrollStart=thishandleScrollStart onScrollStop=thishandleScrollStop onUpdate=thishandleUpdate renderView=thisrenderView renderTrackHorizontal=thisrenderTrackHorizontal renderTrackVertical=thisrenderTrackVertical renderThumbHorizontal=thisrenderThumbHorizontal renderThumbVertical=thisrenderThumbVertical autoHide autoHideTimeout=1000 autoHideDuration=200 autoHeight autoHeightMin=0 autoHeightMax=200 thumbMinSize=30 universal=true ...thisprops> ; }
All properties are documented in the API docs
Examples
Run the simple example:
# Make sure that you've installed the dependencies npm install# Move to example directory cd react-custom-scrollbars/examples/simplenpm installnpm start
Tests
# Make sure that you've installed the dependencies npm install# Run tests npm test
Code Coverage
# Run code coverage. Results can be found in `./coverage` npm run test:cov
License
MIT