Plain-scrollbar NPM

plain-scrollbar

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

Attributes of the PlainScrollbar element:

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: