https://github.com/chdh/plain-scrollbar
A scrollbar web component (HTML custom element)
https://github.com/chdh/plain-scrollbar
scrollbar web-component
Last synced: 4 months ago
JSON representation
A scrollbar web component (HTML custom element)
- Host: GitHub
- URL: https://github.com/chdh/plain-scrollbar
- Owner: chdh
- License: mit
- Created: 2018-01-21T00:14:16.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2021-10-29T16:26:32.000Z (over 4 years ago)
- Last Synced: 2025-10-22T22:38:39.694Z (8 months ago)
- Topics: scrollbar, web-component
- Language: TypeScript
- Homepage:
- Size: 21.5 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# plain-scrollbar
This package implements a plain scrollbar [web component](https://en.wikipedia.org/wiki/Web_Components) (HTML custom element).
Online demo: [www.source-code.biz/snippets/typescript/plainScrollbar](http://www.source-code.biz/snippets/typescript/plainScrollbar)
NPM package: [plain-scrollbar](https://www.npmjs.com/package/plain-scrollbar)
Example of how to use it: [github.com/chdh/plain-scrollbar/tree/master/example](https://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`