Scroll Area
A scrollable container that provides a custom-styled scrollbar with support for both vertical and horizontal scrolling.
import { component$, useStyles$ } from "@builder.io/qwik";
import { ScrollArea } from "@kunai-consulting/qwik";
import styles from "./scroll-area.css?inline";
export default component$(() => {
useStyles$(styles);
return (
<ScrollArea.Root class="!h-[200px] !w-[350px] rounded-md border p-4 scroll-area-root">
<ScrollArea.Viewport class="scroll-area-viewport">
<div class="p-4">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos impedit
rem, repellat deserunt ducimus quasi nisi voluptatem cumque aliquid esse ea
deleniti eveniet incidunt! Deserunt minus laborum accusamus iusto dolorum.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis officiis
error minima eos fugit voluptate excepturi eveniet dolore et, ratione impedit
consequuntur dolorem hic quae corrupti autem? Dolorem, sit voluptatum.
</p>
</div>
</ScrollArea.Viewport>
<ScrollArea.Scrollbar orientation="vertical" class="scroll-area-scrollbar">
<ScrollArea.Thumb class="scroll-area-thumb" />
</ScrollArea.Scrollbar>
</ScrollArea.Root>
);
});
Basic Usage
The Scroll Area component provides a customizable scrolling container that replaces the browser's default scrollbars with a more aesthetically pleasing design.
Anatomy
The Scroll Area component is composed of several parts:
<ScrollArea.Root>
<ScrollArea.Viewport>
{/* Your content */}
</ScrollArea.Viewport>
<ScrollArea.Scrollbar orientation="vertical">
<ScrollArea.Thumb />
</ScrollArea.Scrollbar>
<ScrollArea.Scrollbar orientation="horizontal">
<ScrollArea.Thumb />
</ScrollArea.Scrollbar>
</ScrollArea.Root>
Vertical Scrolling
By default, Scroll Area supports vertical scrolling when content exceeds the container height.
import { component$, useStyles$ } from "@builder.io/qwik";
import { ScrollArea } from "@kunai-consulting/qwik";
import styles from "./scroll-area.css?inline";
export default component$(() => {
useStyles$(styles);
return (
<ScrollArea.Root class="!h-[200px] !w-[350px] rounded-md border p-4 scroll-area-root">
<ScrollArea.Viewport class="scroll-area-viewport">
<div class="p-4">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos impedit
rem, repellat deserunt ducimus quasi nisi voluptatem cumque aliquid esse ea
deleniti eveniet incidunt! Deserunt minus laborum accusamus iusto dolorum.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis officiis
error minima eos fugit voluptate excepturi eveniet dolore et, ratione impedit
consequuntur dolorem hic quae corrupti autem? Dolorem, sit voluptatum.
</p>
</div>
</ScrollArea.Viewport>
<ScrollArea.Scrollbar orientation="vertical" class="scroll-area-scrollbar">
<ScrollArea.Thumb class="scroll-area-thumb" />
</ScrollArea.Scrollbar>
</ScrollArea.Root>
);
});
Horizontal Scrolling
To enable horizontal scrolling, add the horizontal scrollbar component.
import { component$, useStyles$ } from "@builder.io/qwik";
import { ScrollArea } from "@kunai-consulting/qwik";
import styles from "./scroll-area.css?inline";
export default component$(() => {
useStyles$(styles);
return (
<ScrollArea.Root class="!h-[200px] !w-[100px] rounded-md border p-4 scroll-area-root">
<ScrollArea.Viewport class="scroll-area-viewport">
<div class="p-4">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos impedit
rem, repellat deserunt ducimus quasi nisi voluptatem cumque aliquid esse ea
deleniti eveniet incidunt! Deserunt minus laborum accusamus iusto dolorum.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis officiis
error minima eos fugit voluptate excepturi eveniet dolore et, ratione impedit
consequuntur dolorem hic quae corrupti autem? Dolorem, sit voluptatum.
</p>
</div>
</ScrollArea.Viewport>
<ScrollArea.Scrollbar orientation="horizontal" class="scroll-area-scrollbar">
<ScrollArea.Thumb class="scroll-area-thumb" />
</ScrollArea.Scrollbar>
</ScrollArea.Root>
);
});
Both Directions
Scroll Area supports both vertical and horizontal scrolling simultaneously.
import { component$, useStyles$ } from "@builder.io/qwik";
import { ScrollArea } from "@kunai-consulting/qwik";
import styles from "./scroll-area.css?inline";
export default component$(() => {
useStyles$(styles);
return (
<ScrollArea.Root class="!h-[200px] !w-[250px] rounded-md border p-4 scroll-area-root">
<ScrollArea.Viewport class="scroll-area-viewport">
<div class="p-4">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos impedit
rem, repellat deserunt ducimus quasi nisi voluptatem cumque aliquid esse ea
deleniti eveniet incidunt! Deserunt minus laborum accusamus iusto dolorum.
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Blanditiisofficiiserrorminimaeos fugit voluptate excepturi eveniet dolore et,
ratione impedit consequuntur dolorem hic quae corrupti autem? Dolorem, sit
voluptatum.
</p>
</div>
</ScrollArea.Viewport>
<ScrollArea.Scrollbar orientation="vertical" class="scroll-area-scrollbar">
<ScrollArea.Thumb class="scroll-area-thumb" />
</ScrollArea.Scrollbar>
<ScrollArea.Scrollbar orientation="horizontal" class="scroll-area-scrollbar">
<ScrollArea.Thumb class="scroll-area-thumb" />
</ScrollArea.Scrollbar>
</ScrollArea.Root>
);
});
Custom Styling
The Scroll Area component can be styled using CSS classes.
Sizing
The Scroll Area component adapts to its container size. You can control its dimensions using standard CSS properties.
Hidden Scrollbars
The Scroll Area component automatically hides the native browser scrollbars while maintaining scroll functionality.
Scroll Thumb Behavior
The scroll thumb responds to:
- Direct dragging
- Click and drag interactions
- Content scrolling