hp-scroll-area
Custom-scrollbar wrapper. Hides the platform-native scrollbar inside and paints a themed one on top. Native scroll event model preserved — wheel, keyboard (Arrow / PageUp/Down / Home / End), and touch all work. The custom thumb is draggable.
One. Two. Three. Four. Five. Six. Seven. Eight. Nine. Ten.
Eleven. Twelve. Thirteen. Fourteen. Fifteen. Sixteen. Seventeen.
Eighteen. Nineteen. Twenty. Twenty-one. Twenty-two. Twenty-three.
Twenty-four. Twenty-five. Twenty-six. Twenty-seven. Twenty-eight.
Twenty-nine. Thirty. Thirty-one. Thirty-two. Thirty-three.
Thirty-four. Thirty-five. Thirty-six. Thirty-seven. Thirty-eight.
Thirty-nine. Forty. Forty-one. Forty-two. Forty-three. Forty-four.
Install
bun add @hexpunk/core litimport "@hexpunk/core";Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
visibility | visibility | HpScrollVisibility | "auto" | Scrollbar visibility: - `auto` (default): visible whenever the content overflows - `always`: persistently visible - `hover`: only visible while the area is hovered |
Slots
| Slot | Description |
|---|---|
(default) | Scrollable content |
CSS Parts
| Part | Description |
|---|---|
viewport | The scroll viewport (the element that actually scrolls) |
scrollbar | The vertical scrollbar track |
thumb | The scrollbar thumb |
When to use
<html> scrollbar should
stay native — users expect it to behave like every other site they use.
No per-component entries in CHANGELOG.md yet.