Scroll Area

A custom scrollable container with overlay scrollbars that can be styled to match your design.

Vernacular architecture is building done outside any academic tradition, and without professional guidance. It is not a particular architectural movement or style, but rather a broad category, encompassing a wide range and variety of building types, with differing methods of construction, from around the world, both historical and extant and classical and modern. Vernacular architecture constitutes 95% of the world's built environment, as estimated in 1995 by Amos Rapoport, as measured against the small percentage of new buildings every year designed by architects and built by engineers.

This type of architecture usually serves immediate, local needs, is constrained by the materials available in its particular region and reflects local traditions and cultural practices. The study of vernacular architecture does not examine formally schooled architects, but instead that of the design skills and tradition of local builders, who were rarely given any attribution for the work. More recently, vernacular architecture has been examined by designers and the building industry in an effort to be more energy conscious with contemporary design and construction—part of a broader interest in sustainable design.

CSSTailwind CSS

Introduction

ScrollArea replaces the browser's native scrollbar with a custom one while preserving native scrolling behavior. It supports both vertical and horizontal scrolling, thumb dragging, track click-to-jump, and RTL layouts.

Anatomy

Import the components and assemble them:

<script setup>
import {
  ScrollAreaContent,
  ScrollAreaCorner,
  ScrollAreaRoot,
  ScrollAreaScrollbar,
  ScrollAreaThumb,
  ScrollAreaViewport,
} from 'base-ui-vue'
</script>

<template>
  <ScrollAreaRoot>
    <ScrollAreaViewport>
      <ScrollAreaContent>
        <!-- scrollable content -->
      </ScrollAreaContent>
    </ScrollAreaViewport>
    <ScrollAreaScrollbar>
      <ScrollAreaThumb />
    </ScrollAreaScrollbar>
    <ScrollAreaScrollbar orientation="horizontal">
      <ScrollAreaThumb />
    </ScrollAreaScrollbar>
    <ScrollAreaCorner />
  </ScrollAreaRoot>
</template>

Both axes

Use two ScrollAreaScrollbar components (one vertical, one horizontal) with a ScrollAreaCorner for content that overflows in both directions:

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77
• 78
• 79
• 80
• 81
• 82
• 83
• 84
• 85
• 86
• 87
• 88
• 89
• 90
• 91
• 92
• 93
• 94
• 95
• 96
• 97
• 98
• 99
• 100

CSSTailwind CSS

Scroll fade

Use the --scroll-area-overflow-y-start and --scroll-area-overflow-y-end CSS variables on the Viewport to create a fade-out effect at the edges:

Vernacular architecture is building done outside any academic tradition, and without professional guidance. It is not a particular architectural movement or style, but rather a broad category, encompassing a wide range and variety of building types, with differing methods of construction, from around the world, both historical and extant and classical and modern. Vernacular architecture constitutes 95% of the world's built environment, as estimated in 1995 by Amos Rapoport, as measured against the small percentage of new buildings every year designed by architects and built by engineers.

This type of architecture usually serves immediate, local needs, is constrained by the materials available in its particular region and reflects local traditions and cultural practices. The study of vernacular architecture does not examine formally schooled architects, but instead that of the design skills and tradition of local builders, who were rarely given any attribution for the work. More recently, vernacular architecture has been examined by designers and the building industry in an effort to be more energy conscious with contemporary design and construction—part of a broader interest in sustainable design.

CSSTailwind CSS

Keep scrollbar mounted

By default, scrollbars are unmounted when there is no overflow. Use keep-mounted to keep them in the DOM:

<ScrollAreaScrollbar keep-mounted>
  <ScrollAreaThumb />
</ScrollAreaScrollbar>

CSS variables

The component exposes CSS custom properties for advanced styling:

Variable	Applied to	Description
--scroll-area-corner-width	Root	Width of the corner element in pixels.
--scroll-area-corner-height	Root	Height of the corner element in pixels.
--scroll-area-thumb-width	Scrollbar (horizontal)	Width of the thumb in pixels.
--scroll-area-thumb-height	Scrollbar (vertical)	Height of the thumb in pixels.
--scroll-area-overflow-x-start	Viewport	Distance from the horizontal start edge in pixels.
--scroll-area-overflow-x-end	Viewport	Distance from the horizontal end edge in pixels.
--scroll-area-overflow-y-start	Viewport	Distance from the vertical start edge in pixels.
--scroll-area-overflow-y-end	Viewport	Distance from the vertical end edge in pixels.

API reference

Root

Groups all parts of the scroll area. Renders a <div> element.

Prop	Type	Default	Description
as	string | Component	'div'	The element or component to render.
overflowEdgeThreshold	number | { xStart, xEnd, yStart, yEnd }	0	Pixel threshold before overflow edge data attributes are applied.
class	string | ((state: State) => string)	--	CSS class applied to the element.
style	StyleValue | ((state: State) => StyleValue)	--	Style applied to the element.

Data attribute		Description
data-scrolling		Present when the user is scrolling.
data-has-overflow-x		Present when horizontal overflow exists.
data-has-overflow-y		Present when vertical overflow exists.
data-overflow-x-start		Present when there is overflow at the horizontal start.
data-overflow-x-end		Present when there is overflow at the horizontal end.
data-overflow-y-start		Present when there is overflow at the vertical start.
data-overflow-y-end		Present when there is overflow at the vertical end.

Viewport

The scrollable container. Renders a <div> element.

Prop	Type	Default	Description
as	string | Component	'div'	The element or component to render.

Content

An optional wrapper for the scrollable content. Renders a <div> element. Uses a ResizeObserver to recalculate the thumb position when content size changes.

Prop	Type	Default	Description
as	string | Component	'div'	The element or component to render.

Scrollbar

A vertical or horizontal scrollbar track. Renders a <div> element.

Prop	Type	Default	Description
as	string | Component	'div'	The element or component to render.
orientation	'vertical' | 'horizontal'	'vertical'	Which axis the scrollbar controls.
keepMounted	boolean	false	Whether to keep the scrollbar in the DOM when there is no overflow.

Data attribute		Description
data-orientation	'vertical' | 'horizontal'	The scrollbar orientation.
data-hovering		Present when the pointer is over the scroll area.
data-scrolling		Present when the user is scrolling on this axis.
data-has-overflow-x		Present when horizontal overflow exists.
data-has-overflow-y		Present when vertical overflow exists.
data-overflow-x-start		Present when there is overflow at the horizontal start.
data-overflow-x-end		Present when there is overflow at the horizontal end.
data-overflow-y-start		Present when there is overflow at the vertical start.
data-overflow-y-end		Present when there is overflow at the vertical end.

Thumb

The draggable thumb inside a scrollbar. Renders a <div> element.

Prop	Type	Default	Description
as	string | Component	'div'	The element or component to render.

Data attribute		Description
data-orientation	'vertical' | 'horizontal'	The thumb orientation (inherited from parent scrollbar).

Corner

The area at the intersection of horizontal and vertical scrollbars. Renders a <div> element. Only visible when both scrollbars are present.

Prop	Type	Default	Description
as	string | Component	'div'	The element or component to render.