Scroll Area

Use bo-scroll-area when content needs a bounded viewport with custom scrollbars.

Usage

Notification 1

Notification 2

Notification 3

Notification 4

Notification 5

Notification 6

Notification 7

Notification 8

Notification 9

Notification 10

Notification 11

Notification 12

Notification 13

Notification 14

Notification 15

Notification 16

Notification 17

Notification 18

<bo-scroll-area :max-height="160" aria-label="Notifications">
  <div class="grid gap-2 p-3">
    <p v-for="item in items" :key="item">{{ item }}</p>
  </div>
</bo-scroll-area>

Horizontal content

Set masked for the masked style. The viewport supports both vertical and horizontal overflow.

Content wider than the viewport.

<bo-scroll-area :max-height="120" masked aria-label="Wide content">
  <div class="min-w-[36rem] p-3">Content wider than the viewport.</div>
</bo-scroll-area>

API

Prop / slot	Type	Default	Description
id / dataTestId	string	autogenerated	Root attributes.
maxHeight	number	-	Maximum viewport height in pixels.
masked	boolean	false	Applies the masked style.
ariaLabel	string	-	Gives the region an accessible label and region role.
default	slot	-	Scrollable content.