Overlay Scrollbar

<dsx-overlay-scrollbar> — Overlay Scrollbar

Scrollable container with custom scrollbar styling for vertical, horizontal, or bidirectional overflow.

Live Preview

Import

import '@bnotk/dsx/components/overlay-scrollbar.js';

Usage

<dsx-overlay-scrollbar direction="vertical" style="height: 12rem;">
  <div style="height: 24rem">Tall content</div>
</dsx-overlay-scrollbar>

Elements

<dsx-overlay-scrollbar>

Thin wrapper around a scrollable inner div that receives the default slot.

Properties

Property	Type	Default	Description
direction	’vertical’ | ‘horizontal’ | ‘both'	'both’	Constrains overflow direction on the internal scroller.

Methods

None.

Events

None.

Slots

Slot	Description
default	Scrollable content projected inside the inner .scroller div.

CSS Parts

Part	Description
scroller	Inner scrollable element that owns the native scrollbars.

Notes

• Firefox scrollbar styling is provided with scrollbar-width and scrollbar-color.
• WebKit scrollbars are customized with ::-webkit-scrollbar* selectors.

Behavior Notes

• The host itself hides overflow and the inner .scroller takes height: 100%.
• Horizontal mode disables vertical scrolling; vertical mode disables horizontal scrolling; both leaves both directions enabled.

Styling Notes

• Scrollbar size is controlled by --ds2-scrollbar-size.
• Thumbs use --ds2-color-grey-3 and lighten on hover.