solid-custom-scrollbars

• 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

Inspiration

Inspired by the battle-tested and original react-custom-scrollbars.

Installation

npm i solid-custom-scrollbars

This assumes that you’re using npm package manager with a module bundler like Webpack or Browserify to consume CommonJS modules.

Usage

This is the minimal configuration. Check out the Documentation for advanced usage.

importtype{Component}from'solid-js'importScrollbarsfrom'solid-custom-scrollbars'constApp: Component=()=>{return(<Scrollbarsstyle={{width: 500,height: 300}}><p>Some great content...</p></Scrollbars>)}

The <Scrollbars> component is completely customizable. Check out the following code:

importtype{Component}from'solid-js'importScrollbarsfrom'solid-custom-scrollbars'constCustomScrollbars: Component=()=>{return(<ScrollbarsonScroll={handleScroll}onScrollFrame={handleScrollFrame}onScrollStart={handleScrollStart}onScrollStop={handleScrollStop}onUpdate={handleUpdate}renderView={renderView}renderTrackHorizontal={renderTrackHorizontal}renderTrackVertical={renderTrackVertical}renderThumbHorizontal={renderThumbHorizontal}renderThumbVertical={renderThumbVertical}autoHideautoHideTimeout={1000}autoHideDuration={200}autoHeightautoHeightMin={0}autoHeightMax={200}thumbMinSize={30}universal={true}{ ...props}>
)
}

All properties are documented in the API docs.

License

MIT