shadcn-html / scroll-area

Built with: CSS

Scroll Area

Scrollable container with custom-styled thin scrollbars.

Component Skill — components/scroll-area/component-skill.md

Native basis

CSS overflow with custom-styled scrollbars.

Web Platform APIs

Classes

.scroll-area

Default

Tags

v1.0.0-alpha

v0.9.0

v0.8.2

v0.8.1

v0.8.0

v0.7.0

v0.6.0

v0.5.0

v0.4.0

v0.3.0

<div class="scroll-area" style="height:12rem;">
  <!-- long content -->
</div>

CSS view file

Styles for the scroll-area component. Uses design tokens for colors, spacing, and radius.

@layer components {
  .scroll-area {
    overflow: auto;
    position: relative;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;

    /* Webkit custom scrollbar */
    &::-webkit-scrollbar { width: 6px; height: 6px; }
    &::-webkit-scrollbar-track { background: transparent; }
    &::-webkit-scrollbar-thumb {
      background-color: var(--border);
      border-radius: 3px;
      &:hover { background-color: var(--muted-foreground); }
    }

    /* Standard scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
  }
}