Scroll Area

A high-quality, unstyled React scroll area that provides a native scroll container with custom scrollbars.

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.

Anatomy

Import the component and assemble its parts:

Anatomy

import { ScrollArea } from '@base-ui/react/scroll-area';

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

scroll-area.module.css

.Viewport {
  &::before,
  &::after {
    content: '';
    display: block;
    left: 0;
    width: 100%;
    position: absolute;
    pointer-events: none;
    border-radius: 0.375rem;
    transition: height 0.1s ease-out;
  }

  &::before {
    --scroll-area-overflow-y-start: inherit;
    top: 0;
    height: min(40px, var(--scroll-area-overflow-y-start));
    background: linear-gradient(to bottom, var(--color-gray-50), transparent);
  }

  &::after {
    --scroll-area-overflow-y-end: inherit;
    bottom: 0;
    height: min(40px, var(--scroll-area-overflow-y-end, 40px));
    background: linear-gradient(to top, var(--color-gray-50), transparent);
  }
}

For SSR, a fallback can be used as part of the var() function to provide a default height.

SSR fallback

.Viewport::after {
  height: min(40px, var(--scroll-area-overflow-y-end, 40px));
}

API reference

Root

Name	Type	Default	Description
`xStart`Required	`number`	—	—
`xEnd`Required	`number`	—	—
`yStart`Required	`number`	—	—
`yEnd`Required	`number`	—	—

Scrollbar

Name	Type	Default	Description
`orientation`Optional	`'vertical' \| 'horizontal' \| undefined`	`vertical`	Whether the scrollbar controls vertical or horizontal scroll.
`keepMounted`Optional	`boolean \| undefined`	`false`	Whether to keep the HTML element in the DOM when the viewport isn't scrollable.

Scroll Area

Anatomy

Examples

Both scrollbars

Gradient scroll fade

API reference

Root

Scrollbar

On this page