Scroller

A web component for scrollable content with thin, themeable scrollbars and optional scroll snapping.

A scroll container with a thin, themable scrollbar.

Installation

npm install @3mo/scroller

import '@3mo/scroller'

Usage

<mo-scroller style='height: 400px'>
	${Array.from({ length: 50 }, (_, index) => html`<p>Paragraph ${index + 1}</p>`)}
</mo-scroller>

Examples

• Horizontal — Content wider than the scroller scrolls sideways with the same thin scrollbar.
• Snapping — snapType sets scroll-snap-type, so that scrolling comes to rest on the items that declare scroll-snap-align.
• Custom Properties — --mo-scroller-thumb-color and --mo-scroller-track-color color the scrollbar.

API

mo-scroller

Properties

| Name | Attribute | Type | Default | Description | | --- | --- | --- | --- | --- | | snapType | snapType | ScrollSnapType \| undefined | | The scroll snap type, mapped to scroll-snap-type |

Events

| Name | Detail | | --- | --- | | scroll | |

Slots

| Name | Description | | --- | --- | | (default) | The content of the scroller |

CSS custom properties

| Name | Description | | --- | --- | | --mo-scroller-thumb-color | The color of the scroller thumb | | --mo-scroller-track-color | The color of the scroller track |

Links

• Documentation
• Changelog
• Source

License

MIT © 3MO GmbH