postcss-scrollbar

PostCSS plugin enabling custom scrollbars

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
postcss-scrollbar
7420.5.1a year ago5 years agoMinified + gzip package size for postcss-scrollbar in KB

Popular Searches

Readme

postcss-scrollbar
!npm versionnpm-imagenpm-url !CI Statusci-imageci-url !Coverage Statuscodecov-imagecodecov-url
PostCSS plugin enabling custom scrollbars

Spec : https://drafts.csswg.org/css-scrollbars-1
Browser support: https://caniuse.com/#feat=css-scrollbar
Docs: https://developer.mozilla.org/en-US/docs/Web/CSS/CSSScrollbars

Installation

npm install postcss postcss-scrollbar --save-dev

or
yarn add postcss postcss-scrollbar --save-dev

Usage

const fs = require('fs');
const postcss = require('postcss');
const scrollbar = require('postcss-scrollbar');

let input = fs.readFileSync('input.css', 'utf8');

postcss()
  .use(scrollbar)
  .process(input)
  .then(result => {
    fs.writeFileSync('output.css', result.css);
  });

Examples

/* input */
.scrollable {
  scrollbar-color: rebeccapurple green;
  scrollbar-width: thin;
}

/* output */
.scrollable::-webkit-scrollbar-thumb {
  background-color: rebeccapurple;
}
.scrollable::-webkit-scrollbar-track {
  background-color: green;
}
.scrollable::-webkit-scrollbar-corner {
  background-color: green;
}
.scrollable::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.scrollable {
  -ms-overflow-style: auto;
  scrollbar-color: rebeccapurple green;
  scrollbar-width: thin;
}

/* input */
.scrollable {
  scrollbar-width: none;
}

/* output */
.scrollable::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.scrollable {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

options

width

type: String
default: 8px
Allows for setting the webkit fallbacks width and height.

edgeAutohide

type: Boolean
default: false
Allows for setting the scrollbar behaviour for the Edge Browser.
-ms-overflow-style: -ms-autohiding-scrollbar;
Edge doesn't support scrollbar styling.
See https://developer.mozilla.org/fr/docs/Web/CSS/-ms-overflow-style

Credits

Licence

postcss-scrollbar is unlicensed.