v0.9.4defuss-shadcn
Theme

defuss-shadcn / Data Display / scroll-area

Built with: CSS

Scroll AreaATM

Scrollable container with custom-styled thin scrollbars.

On this page (4)
Component Skill — components/scroll-area/component-skill.md

Native basis

CSS overflow with custom-styled scrollbars.

Web Platform APIs

overflowscrollbar-widthscrollbar-gutteroverscroll-behavior::-webkit-scrollbar

Classes

.scroll-area

§Default

§Density

For a scroll area the whitespace policy is the scrollbar gutter: data-density scales the thumb thickness - compact 4px, comfortable 6px (the unsized default), spacious 8px (standard scrollbar-width: medium).

§States

Machine contract - verified against scroll-area.schema.json by bun run verify:

StateTypeValuesDefaultDescription
scrollTopnumber—0Vertical scroll position in px - set by the panel, tracked while scrolling inside the preview.

§CSS view file

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

@layer components {
  .scroll-area {
    /* -- Density --------------------------------------------------
       For a scroll area the whitespace policy IS the scrollbar gutter:
       data-density scales the thumb thickness (4 / 6 / 8px); comfortable
       matches the unsized default. */
    --scrollbar-size: 6px;
    overflow: auto;
    position: relative;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    /* Webkit custom scrollbar */
    &::-webkit-scrollbar { width: var(--scrollbar-size); height: var(--scrollbar-size); }
    &::-webkit-scrollbar-track { background: transparent; }
    &::-webkit-scrollbar-thumb {
      background-color: var(--border);
      border-radius: calc(var(--scrollbar-size) / 2);
      &:hover { background-color: var(--muted-foreground); }
    }
    /* Standard scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    &[data-density="compact"] { --scrollbar-size: 4px; }
    &[data-density="comfortable"] { --scrollbar-size: 6px; }
    &[data-density="spacious"] {
      --scrollbar-size: 8px;
      scrollbar-width: medium;
    }
  }
}

Comments, ideas or improvements? Edit this page's source on GitHub