Skip to content

Scrollbox

Alpha 0.5
js
import 'pyro/scrollbox'
Preview Code Stackblitz
[...content]

Usage

html
<pyro-scrollbox style="width: 100%`; height: 500px">
  <div style="height: 400px;">[...content]</div>
</pyro-scrollbox>

Variations

Props

ts
interface ScrollboxProps {
  /** Always shows the scrollbar, even when not needed*/
  visible?: boolean;
  /** Contents */
  children?: any;
}

Slots

ts
/**
 * @slot - Contents of the scrollbox
 */

CSS prop theming

The

Full theming sheet

js
/**
 * @prop {--pyro-scrollbox-bar-color = auto} - scrollbar bar and arrows color
 * @prop {--pyro-scrollbox-background = auto} - scrollbar background color
 * @prop {--pyro-scrollbox-padding = 0} - inside `padding`
 */