Scroll Area

A native scroll container with custom scrollbars.

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.

<script lang="ts">
	import { ScrollArea } from '@sveltery/base/scroll-area';
</script>

<ScrollArea.Root class="h-[8.5rem] w-96 max-w-[calc(100vw-8rem)] bg-white dark:bg-neutral-950">
	<ScrollArea.Viewport
		class="h-full border border-neutral-950 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:border-white dark:focus-visible:outline-white"
	>
		<ScrollArea.Content
			class="flex flex-col gap-4 py-2 pr-5 pl-3 text-sm leading-[1.375rem] text-neutral-950 dark:text-white"
		>
			<p>
				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.
			</p>
			<p>
				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.
			</p>
		</ScrollArea.Content>
	</ScrollArea.Viewport>
	<ScrollArea.Scrollbar
		class="pointer-events-none m-px flex w-4 justify-center bg-black/12 opacity-0 transition-opacity data-hovering:pointer-events-auto data-hovering:opacity-100 data-scrolling:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0 dark:bg-white/12"
	>
		<ScrollArea.Thumb class="w-full bg-neutral-950 dark:bg-white" />
	</ScrollArea.Scrollbar>
</ScrollArea.Root>

Anatomy

Import the component and assemble its parts:

Anatomy

<script lang="ts">
	import { ScrollArea } from '@sveltery/base/scroll-area';
</script>

<ScrollArea.Root>
	<ScrollArea.Viewport>
		<ScrollArea.Content />
	</ScrollArea.Viewport>
	<ScrollArea.Scrollbar>
		<ScrollArea.Thumb />
	</ScrollArea.Scrollbar>
	<ScrollArea.Corner />
</ScrollArea.Root>

Examples

Both scrollbars

Use <ScrollArea.Corner> to prevent the scrollbars from intersecting.

<script lang="ts">
	import { ScrollArea } from '@sveltery/base/scroll-area';
</script>

<ScrollArea.Root class="h-80 w-80 max-w-[calc(100vw-8rem)]">
	<ScrollArea.Viewport
		class="h-full border border-neutral-950 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:border-white dark:focus-visible:outline-white"
	>
		<ScrollArea.Content class="pt-3 pr-6 pb-6 pl-3">
			<ul
				class="m-0 grid list-none grid-cols-[repeat(10,6.25rem)] grid-rows-[repeat(10,6.25rem)] gap-3 p-0"
			>
				{#each Array.from({ length: 100 }, (_, i) => i + 1) as n (n)}
					<li
						class="flex items-center justify-center bg-neutral-200 text-sm font-bold text-neutral-600 dark:bg-neutral-800 dark:text-neutral-400"
					>
						{n}
					</li>
				{/each}
			</ul>
		</ScrollArea.Content>
	</ScrollArea.Viewport>
	<ScrollArea.Scrollbar
		class="relative m-px flex bg-black/12 dark:bg-white/12 opacity-0 transition-opacity pointer-events-none data-[orientation=vertical]:w-4 data-[orientation=horizontal]:h-4 data-hovering:pointer-events-auto data-hovering:opacity-100 data-scrolling:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0"
	>
		<ScrollArea.Thumb class="w-full bg-neutral-950 dark:bg-white" />
	</ScrollArea.Scrollbar>
	<ScrollArea.Scrollbar
		class="relative m-px flex bg-black/12 dark:bg-white/12 opacity-0 transition-opacity pointer-events-none data-[orientation=vertical]:w-4 data-[orientation=horizontal]:h-4 data-hovering:pointer-events-auto data-hovering:opacity-100 data-scrolling:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0"
		orientation="horizontal"
	>
		<ScrollArea.Thumb class="w-full bg-neutral-950 dark:bg-white" />
	</ScrollArea.Scrollbar>
	<ScrollArea.Corner />
</ScrollArea.Root>

Gradient scroll fade

Use the viewport overflow CSS variables to drive a CSS mask, which gradually increases the fade as the user scrolls away from the edges.

scroll-area.module.css

.Viewport {
	mask-image: linear-gradient(
		to bottom,
		transparent 0,
		black min(40px, var(--scroll-area-overflow-y-start)),
		black calc(100% - min(40px, var(--scroll-area-overflow-y-end, 40px))),
		transparent 100%
	);
	mask-repeat: no-repeat;
}

For SSR, a fallback can be used as part of the end-side var() call so the mask is visible before the overflow CSS variables hydrate.

SSR fallback

var(--scroll-area-overflow-y-end, 40px);

When the fade is applied to <ScrollArea.Viewport> itself, the variables can be used directly. However, inheritance to children is disabled, so they must explicitly opt-in using the inherit keyword.

Child element opt-in

.Child {
	--scroll-area-overflow-y-start: inherit;
	--scroll-area-overflow-y-end: inherit;
}

<script lang="ts">
	import { ScrollArea } from '@sveltery/base/scroll-area';
</script>

<ScrollArea.Root
	class="h-48 w-96 max-w-[calc(100vw-8rem)] bg-neutral-100 has-[>_:first-child:focus-visible]:outline-2 has-[>_:first-child:focus-visible]:outline-offset-0 has-[>_:first-child:focus-visible]:outline-neutral-950 dark:bg-neutral-800 dark:has-[>_:first-child:focus-visible]:outline-white"
>
	<ScrollArea.Viewport
		class="h-full mask-linear-[to_bottom,transparent_0,black_min(40px,var(--scroll-area-overflow-y-start)),black_calc(100%_-_min(40px,var(--scroll-area-overflow-y-end,40px))),transparent_100%] bg-neutral-100 mask-no-repeat outline-none dark:bg-neutral-800"
	>
		<ScrollArea.Content
			class="flex flex-col gap-4 py-2 pr-5 pl-3 text-sm leading-[1.375rem] text-neutral-950 dark:text-white"
		>
			<p>
				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.
			</p>
			<p>
				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.
			</p>
		</ScrollArea.Content>
	</ScrollArea.Viewport>
	<ScrollArea.Scrollbar
		class="pointer-events-none m-px flex w-4 justify-center bg-black/8 opacity-0 transition-opacity duration-150 data-hovering:pointer-events-auto data-hovering:opacity-100 data-scrolling:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0 dark:bg-white/12"
	>
		<ScrollArea.Thumb class="w-full bg-neutral-950 dark:bg-white" />
	</ScrollArea.Scrollbar>
</ScrollArea.Root>

Combining with Tabs

Use <Tabs.List>'s render snippet to render <ScrollArea.Viewport> directly when the tab list itself needs the viewport overflow values for a mask fade. This keeps the mask logic on the same element that receives the scroll state.

Tabs with ScrollArea

<Tabs.Root value="overview">
	<ScrollArea.Root>
		<Tabs.List>
			{#snippet render(props, state, children)}
				<ScrollArea.Viewport {...props}>{@render children?.()}</ScrollArea.Viewport>
			{/snippet}
			<Tabs.Tab value="overview">Overview</Tabs.Tab>
			<Tabs.Indicator />
		</Tabs.List>
	</ScrollArea.Root>
	<Tabs.Panel value="overview">...</Tabs.Panel>
</Tabs.Root>

API reference

Root

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

overflowEdgeThreshold OverflowEdgeThreshold 0

Name: overflowEdgeThreshold
Description: The threshold in pixels that must be passed before the overflow edge attributes are applied. Accepts a single number for all edges or an object to configure them individually.
Type: OverflowEdgeThreshold
Default: 0

render Snippet<[props: HTMLAttributes<HTMLDivElement>, state: ScrollAreaRootState, children: Snippet | undefined]> —

Name: render
Description: Replace the default <div>. Spread props onto the host element.
Type: Snippet<[props: HTMLAttributes<HTMLDivElement>, state: ScrollAreaRootState, children: Snippet | undefined]>

scrolling boolean

Name: scrolling
Description: Whether the scroll area is being scrolled.
Type: boolean

hasOverflowX boolean

Name: hasOverflowX
Description: Whether horizontal overflow is present.
Type: boolean

hasOverflowY boolean

Name: hasOverflowY
Description: Whether vertical overflow is present.
Type: boolean

overflowXStart boolean

Name: overflowXStart
Description: Whether there is overflow on the inline start side for the horizontal axis.
Type: boolean

overflowXEnd boolean

Name: overflowXEnd
Description: Whether there is overflow on the inline end side for the horizontal axis.
Type: boolean

overflowYStart boolean

Name: overflowYStart
Description: Whether there is overflow on the block start side.
Type: boolean

overflowYEnd boolean

Name: overflowYEnd
Description: Whether there is overflow on the block end side.
Type: boolean

cornerHidden boolean

Name: cornerHidden
Description: Whether the scrollbar corner is hidden.
Type: boolean

data-has-overflow-x

Present when the scroll area content is wider than the viewport.

data-has-overflow-y

Present when the scroll area content is taller than the viewport.

data-overflow-x-end

Present when there is overflow on the horizontal end side.

data-overflow-x-start

Present when there is overflow on the horizontal start side.

data-overflow-y-end

Present when there is overflow on the vertical end side.

data-overflow-y-start

Present when there is overflow on the vertical start side.

data-scrolling

Present when the user scrolls inside the scroll area.

Attribute	Description	-
`data-has-overflow-x`	Present when the scroll area content is wider than the viewport.
`data-has-overflow-y`	Present when the scroll area content is taller than the viewport.
`data-overflow-x-end`	Present when there is overflow on the horizontal end side.
`data-overflow-x-start`	Present when there is overflow on the horizontal start side.
`data-overflow-y-end`	Present when there is overflow on the vertical end side.
`data-overflow-y-start`	Present when there is overflow on the vertical start side.
`data-scrolling`	Present when the user scrolls inside the scroll area.

--scroll-area-corner-height

The scroll area's corner height.

--scroll-area-corner-width

The scroll area's corner width.

CSS Variable	Description	-
`--scroll-area-corner-height`	The scroll area's corner height.
`--scroll-area-corner-width`	The scroll area's corner width.

Viewport

The scrollable container of the scroll area. Renders a <div> element.

render Snippet<[props: HTMLAttributes<HTMLDivElement>, state: ScrollAreaViewportState, children: Snippet | undefined]> —

Name: render
Description: Replace the default <div>. Spread props onto the host element.
Type: Snippet<[props: HTMLAttributes<HTMLDivElement>, state: ScrollAreaViewportState, children: Snippet | undefined]>

scrolling boolean

Name: scrolling
Description: Whether the scroll area is being scrolled.
Type: boolean

hasOverflowX boolean

Name: hasOverflowX
Description: Whether horizontal overflow is present.
Type: boolean

hasOverflowY boolean

Name: hasOverflowY
Description: Whether vertical overflow is present.
Type: boolean

overflowXStart boolean

Name: overflowXStart
Description: Whether there is overflow on the inline start side for the horizontal axis.
Type: boolean

overflowXEnd boolean

Name: overflowXEnd
Description: Whether there is overflow on the inline end side for the horizontal axis.
Type: boolean

overflowYStart boolean

Name: overflowYStart
Description: Whether there is overflow on the block start side.
Type: boolean

overflowYEnd boolean

Name: overflowYEnd
Description: Whether there is overflow on the block end side.
Type: boolean

cornerHidden boolean

Name: cornerHidden
Description: Whether the scrollbar corner is hidden.
Type: boolean

data-has-overflow-x

Present when the scroll area content is wider than the viewport.

data-has-overflow-y

Present when the scroll area content is taller than the viewport.

data-overflow-x-end

Present when there is overflow on the horizontal end side.

data-overflow-x-start

Present when there is overflow on the horizontal start side.

data-overflow-y-end

Present when there is overflow on the vertical end side.

data-overflow-y-start

Present when there is overflow on the vertical start side.

data-scrolling

Present when the user scrolls inside the scroll area.

Attribute	Description	-
`data-has-overflow-x`	Present when the scroll area content is wider than the viewport.
`data-has-overflow-y`	Present when the scroll area content is taller than the viewport.
`data-overflow-x-end`	Present when there is overflow on the horizontal end side.
`data-overflow-x-start`	Present when there is overflow on the horizontal start side.
`data-overflow-y-end`	Present when there is overflow on the vertical end side.
`data-overflow-y-start`	Present when there is overflow on the vertical start side.
`data-scrolling`	Present when the user scrolls inside the scroll area.

--scroll-area-overflow-x-end

The distance from the horizontal end edge in pixels.

--scroll-area-overflow-x-start

The distance from the horizontal start edge in pixels.

--scroll-area-overflow-y-end

The distance from the vertical end edge in pixels.

--scroll-area-overflow-y-start

The distance from the vertical start edge in pixels.

CSS Variable	Description	-
`--scroll-area-overflow-x-end`	The distance from the horizontal end edge in pixels.
`--scroll-area-overflow-x-start`	The distance from the horizontal start edge in pixels.
`--scroll-area-overflow-y-end`	The distance from the vertical end edge in pixels.
`--scroll-area-overflow-y-start`	The distance from the vertical start edge in pixels.

Content

A container for the content of the scroll area. Renders a <div> element.

render Snippet<[props: HTMLAttributes<HTMLDivElement>, state: ScrollAreaContentState, children: Snippet | undefined]> —

Name: render
Description: Replace the default <div>. Spread props onto the host element.
Type: Snippet<[props: HTMLAttributes<HTMLDivElement>, state: ScrollAreaContentState, children: Snippet | undefined]>

scrolling boolean

Name: scrolling
Description: Whether the scroll area is being scrolled.
Type: boolean

hasOverflowX boolean

Name: hasOverflowX
Description: Whether horizontal overflow is present.
Type: boolean

hasOverflowY boolean

Name: hasOverflowY
Description: Whether vertical overflow is present.
Type: boolean

overflowXStart boolean

Name: overflowXStart
Description: Whether there is overflow on the inline start side for the horizontal axis.
Type: boolean

overflowXEnd boolean

Name: overflowXEnd
Description: Whether there is overflow on the inline end side for the horizontal axis.
Type: boolean

overflowYStart boolean

Name: overflowYStart
Description: Whether there is overflow on the block start side.
Type: boolean

overflowYEnd boolean

Name: overflowYEnd
Description: Whether there is overflow on the block end side.
Type: boolean

cornerHidden boolean

Name: cornerHidden
Description: Whether the scrollbar corner is hidden.
Type: boolean

data-has-overflow-x

Present when the scroll area content is wider than the viewport.

data-has-overflow-y

Present when the scroll area content is taller than the viewport.

data-overflow-x-end

Present when there is overflow on the horizontal end side.

data-overflow-x-start

Present when there is overflow on the horizontal start side.

data-overflow-y-end

Present when there is overflow on the vertical end side.

data-overflow-y-start

Present when there is overflow on the vertical start side.

data-scrolling

Present when the user scrolls inside the scroll area.

Attribute	Description	-
`data-has-overflow-x`	Present when the scroll area content is wider than the viewport.
`data-has-overflow-y`	Present when the scroll area content is taller than the viewport.
`data-overflow-x-end`	Present when there is overflow on the horizontal end side.
`data-overflow-x-start`	Present when there is overflow on the horizontal start side.
`data-overflow-y-end`	Present when there is overflow on the vertical end side.
`data-overflow-y-start`	Present when there is overflow on the vertical start side.
`data-scrolling`	Present when the user scrolls inside the scroll area.

Scrollbar

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

orientation ScrollAxis 'vertical'

Name: orientation
Description: Whether the scrollbar controls vertical or horizontal scroll.
Type: ScrollAxis
Default: 'vertical'

keepMounted boolean false

Name: keepMounted
Description: Whether to keep the HTML element in the DOM when the viewport isn't scrollable.
Type: boolean
Default: false

render Snippet<[props: HTMLAttributes<HTMLDivElement>, state: ScrollAreaScrollbarState, children: Snippet | undefined]> —

Name: render
Description: Replace the default <div>. Spread props onto the host element.
Type: Snippet<[props: HTMLAttributes<HTMLDivElement>, state: ScrollAreaScrollbarState, children: Snippet | undefined]>

hovering boolean

Name: hovering
Description: Whether the scroll area is being hovered.
Type: boolean

scrolling boolean

Name: scrolling
Description: Whether this scrollbar's axis is being scrolled.
Type: boolean

orientation ScrollAxis

Name: orientation
Description: The orientation of the scrollbar.
Type: ScrollAxis

hasOverflowX boolean

Name: hasOverflowX
Description: Whether horizontal overflow is present.
Type: boolean

hasOverflowY boolean

Name: hasOverflowY
Description: Whether vertical overflow is present.
Type: boolean

overflowXStart boolean

Name: overflowXStart
Description: Whether there is overflow on the inline start side for the horizontal axis.
Type: boolean

overflowXEnd boolean

Name: overflowXEnd
Description: Whether there is overflow on the inline end side for the horizontal axis.
Type: boolean

overflowYStart boolean

Name: overflowYStart
Description: Whether there is overflow on the block start side.
Type: boolean

overflowYEnd boolean

Name: overflowYEnd
Description: Whether there is overflow on the block end side.
Type: boolean

cornerHidden boolean

Name: cornerHidden
Description: Whether the scrollbar corner is hidden.
Type: boolean

data-orientation

Indicates the orientation of the scrollbar.

data-has-overflow-x

Present when the scroll area content is wider than the viewport.

data-has-overflow-y

Present when the scroll area content is taller than the viewport.

data-hovering

Present when the pointer is over the scroll area.

data-overflow-x-end

Present when there is overflow on the horizontal end side.

data-overflow-x-start

Present when there is overflow on the horizontal start side.

data-overflow-y-end

Present when there is overflow on the vertical end side.

data-overflow-y-start

Present when there is overflow on the vertical start side.

data-scrolling

Present when the user scrolls inside the scroll area.

Attribute	Description	-
`data-orientation`	Indicates the orientation of the scrollbar.
`data-has-overflow-x`	Present when the scroll area content is wider than the viewport.
`data-has-overflow-y`	Present when the scroll area content is taller than the viewport.
`data-hovering`	Present when the pointer is over the scroll area.
`data-overflow-x-end`	Present when there is overflow on the horizontal end side.
`data-overflow-x-start`	Present when there is overflow on the horizontal start side.
`data-overflow-y-end`	Present when there is overflow on the vertical end side.
`data-overflow-y-start`	Present when there is overflow on the vertical start side.
`data-scrolling`	Present when the user scrolls inside the scroll area.

--scroll-area-thumb-height

The scroll area thumb's height.

--scroll-area-thumb-width

The scroll area thumb's width.

CSS Variable	Description	-
`--scroll-area-thumb-height`	The scroll area thumb's height.
`--scroll-area-thumb-width`	The scroll area thumb's width.

Thumb

The draggable thumb that indicates the current scroll position. Renders a <div> element.

render Snippet<[props: HTMLAttributes<HTMLDivElement>, state: ScrollAreaThumbState, children: Snippet | undefined]> —

Name: render
Description: Replace the default <div>. Spread props onto the host element.
Type: Snippet<[props: HTMLAttributes<HTMLDivElement>, state: ScrollAreaThumbState, children: Snippet | undefined]>

scrolling boolean

Name: scrolling
Description: Whether this thumb's axis is being scrolled.
Type: boolean

orientation ScrollAxis

Name: orientation
Description: The component orientation.
Type: ScrollAxis

data-orientation

Indicates the orientation of the scrollbar.

data-scrolling

Present when the user scrolls inside the scroll area.

Attribute	Description	-
`data-orientation`	Indicates the orientation of the scrollbar.
`data-scrolling`	Present when the user scrolls inside the scroll area.

Corner

The rectangle where the horizontal and vertical scrollbars meet. Renders a <div> element.

render Snippet<[props: HTMLAttributes<HTMLDivElement>, state: ScrollAreaCornerState, children: Snippet | undefined]> —

Name: render
Description: Replace the default <div>. Spread props onto the host element.
Type: Snippet<[props: HTMLAttributes<HTMLDivElement>, state: ScrollAreaCornerState, children: Snippet | undefined]>