Skip to content

Scroll Area

Augments native scroll functionality for custom, cross-browser styling.

Examples

Default

Jokester began sneaking into the castle in the middle of the night and leaving jokes all over the place: under the king's pillow, in his soup, even in the royal toilet. The king was furious, but he couldn't seem to stop Jokester. And then, one day, the people of the kingdom discovered that the jokes were actually funny, and they started laughing. And then they started dancing. And then they started singing. And then they started happy.
vue
<ScrollArea class="h-50 w-87.5 rounded-md border p-4">
  Jokester began sneaking into the castle in the middle of the night and leaving
  jokes all over the place: under the king's pillow, in his soup, even in the
  royal toilet. The king was furious, but he couldn't seem to stop Jokester. And
  then, one day, the people of the kingdom discovered that the jokes were
  actually funny, and they started laughing. And then they started dancing. And
  then they started singing. And then they started happy.
</ScrollArea>

Props

ScrollArea

PropTypeDefaultDescription
typeauto | always | scrollhoverThe type of scroll area.
scrollHideDelaynumber600The delay before the scroll bar hides.
dirltr | rtl-The reading direction of the scroll area.

Slots

ScrollArea

SlotDescription
defaultThe content of the scroll area.