plain-scrollbar

A scrollbar web component (HTML custom element)

Usage no npm install needed!

<script type="module">
  import plainScrollbar from 'https://cdn.skypack.dev/plain-scrollbar';
</script>

README

plain-scrollbar

This package implements a plain scrollbar web component (HTML custom element).

Online demo: www.source-code.biz/snippets/typescript/plainScrollbar
NPM package: plain-scrollbar
Example of how to use it: github.com/chdh/plain-scrollbar/tree/master/example

Attributes of the PlainScrollbar element:

  • orientation: The orientation of the scrollbar. "horizontal" or "vertical".

Properties of the PlainScrollbar element:

  • value: The current position of the thumb. A floating point number between 0 and 1.
  • thumbSize: The size of the thumb, relative to the trough. A floating point number between 0 and 1. The value 0 is used to hide the thumb. Small values greater than 0 are overridden by plain-scrollbar-thumb-min-size.
  • orientation: The orientation of the scrollbar. "horizontal" or "vertical". Same as the attribute with the same name.
  • orientationBoolean: The orientation as a read-only boolean value. false=horizontal, true=vertical.

When the user changes the scrollbar, a scrollbar-input event is fired with one of the following codes in the detail field:

  • value: The user dragged the thumb of the scrollbar and the value property has been updated accordingly.
  • decrementSmall: The user clicked on the up/left button.
  • incrementSmall: The user clicked on the down/right button.
  • decrementLarge: The user clicked within the upper/left background of the trough.
  • incrementLarge: The user clicked within the lower/right background of the trough.

The following CSS variables (CSS custom properties) can be used to customize the appearance of the scrollbar:

  • plain-scrollbar-button-size
  • plain-scrollbar-button-color
  • plain-scrollbar-button-color-hover
  • plain-scrollbar-button-color-active
  • plain-scrollbar-thumb-background-color
  • plain-scrollbar-thumb-background-color-hover
  • plain-scrollbar-thumb-background-color-active
  • plain-scrollbar-thumb-border-width
  • plain-scrollbar-thumb-border-color
  • plain-scrollbar-thumb-border-radius
  • plain-scrollbar-thumb-min-size (Must be a pixel length value, e.g. "30px". Default is "15px".)

The following CSS ::part() pseudo-elements can be used to customize the appearance of the scrollbar:

  • root
  • button
  • button1
  • button2
  • arrow
  • upArrow
  • downArrow
  • leftArrow
  • rightArrow
  • trough
  • thumb