custom-scroll-styles

Custom Scroll Styles

This package hides the native scrollbar and replaces it with a brand new one you can customise!

How to use?

Step 1: Install required packages with NPM.

npm install --save custom-scroll-styles
npm install --save-dev style-loader css-loader

Step 2: Add the following code to your module.exports object in webpack.config.js:

module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
}

Step 3: Using Webpack, load the required JS:

import addCustomScrollbar from 'custom-scroll-styles';

Step 4: Call the function below inside your code:

addCustomScrollbar(clrMain, clrSecondary, clrScrollbar);

where...

clrMain - main color set, e.g. "white" or "#fff"
clrSecondary - secondary color set
clrScrollbar - background color of the scrollbar

Enjoy!

Readme