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.

import type { Component } from 'solid-js'
import Scrollbars from 'solid-custom-scrollbars'

const App: Component = () => {
  return (
    <Scrollbars style={{ width: 500, height: 300 }}>
      <p>Some great content...</p>
    </Scrollbars>
  )
}

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

import type { Component } from 'solid-js'
import Scrollbars from 'solid-custom-scrollbars'

const CustomScrollbars: Component = () => {
  return (
    <Scrollbars
      onScroll={ handleScroll }
      onScrollFrame={ handleScrollFrame }
      onScrollStart={ handleScrollStart }
      onScrollStop={ handleScrollStop }
      onUpdate={ handleUpdate }
      renderView={ renderView }
      renderTrackHorizontal={ renderTrackHorizontal }
      renderTrackVertical={ renderTrackVertical }
      renderThumbHorizontal={ renderThumbHorizontal }
      renderThumbVertical={ renderThumbVertical }
      autoHide
      autoHideTimeout={ 1000 }
      autoHideDuration={ 200 }
      autoHeight
      autoHeightMin={ 0 }
      autoHeightMax={ 200 }
      thumbMinSize={ 30 }
      universal={ true }
      { ...props }>
  )
}

All properties are documented in the API docs.

License

MIT