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.

<script setup>
import { ScrollArea, ScrollBar } from '@empathyds/vue'
</script>

<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

Prop	Type	Default	Description
type	auto | always | scroll	hover	The type of scroll area.
scrollHideDelay	number	600	The delay before the scroll bar hides.
dir	ltr | rtl	-	The reading direction of the scroll area.

Slots

ScrollArea

Slot	Description
default	The content of the scroll area.