Primitives / foldkit-primitives/dom

ScrollBars

const · packages/primitives/src/dom/scroll-bars.ts:53

const ScrollBars: Mount.MountDefinitionWithArgs<
  'ScrollBars',
  {
    idle: Schema.optional<Schema.Number>
    scroller: Schema.optional<Schema.String>
  },
  never
>

An overlay scrollbar as a Mount, with no Message and no Model: where a scroller is scrolled is the browser's, and the bar only shows it.

It runs on the scroller (or on an element holding it, named by scroller, when the scroller carries another Mount) and drives the bars drawn beside it: the scroller's parent's children marked data-scroll-bar (block or inline), which a style lays over the scroller's edge. Each bar gets data-scrollable while its axis has more to scroll, data-shown while the scroller scrolls or the pointer moves over it, until idle milliseconds pass with neither (or longer, while the pointer rests on a bar), and data-dragging while its thumb is dragged; and --fk-scroll-thumb-offset and -size (see scrollThumb). Pressing a bar off its thumb moves the thumb there, then drags it.

It does nothing where the primary pointer is coarse or cannot hover, decided when it mounts: touch keeps the browser's bar and its physics. Otherwise the scroller gets data-scroll-overlaid, for a style to hide the native bar. How the bar looks, rests, widens and fades is the style's.

In the guides