{"name":"scroll-area","type":"registry:ui","files":[{"type":"registry:file","target":"scroll-area/RULES.md","highlightedContent":"

# Scroll Area 设计规范\n\n- 用于固定区域内的自定义滚动条（侧栏列表、弹层中的长内容）；整页滚动保持浏览器原生滚动。\n- Scroll Area 必须有确定的高度或最大高度（`h-*`、`max-h-*` 档位类，或在 flex 布局中 `flex-1 min-h-0`），否则不会出现滚动。\n- 横向滚动设 `orientation=\"horizontal\"`，两个方向都需要时设 `both`。\n- 视口可以被键盘聚焦并滚动；区域内容没有标题时给 Scroll Area 设 `aria-label` 说明内容。\n- 滚动条不能改变版面：出现或消失时，内容不能左右晃动。整页滚动条库里已统一处理：位置预留（根元素 `scrollbar-gutter: stable`），轨道透明，只露出细滑块，没有滚动槽；不要在页面或布局上再写 `overflow-y: scroll`、`overflow-y: overlay` 之类的补丁。\n- 横向滚动，或内容会动态变长变短的区域，用 Scroll Area（`orientation=\"horizontal\"` 或 `both`）：滚动条浮在内容上方，只显示滑块、不占位，并按内容比例自动伸缩。原生横向滚动条占的是高度，无法预留，所以不要用在内容会变化的地方。\n

"},{"type":"registry:file","target":"scroll-area/index.ts","highlightedContent":"

import Scrollbar from \"./scroll-area-scrollbar.svelte\";\nimport Root from \"./scroll-area.svelte\";\n\nexport {\n  Root,\n  Scrollbar,\n  //,\n  Root as ScrollArea,\n  Scrollbar as ScrollAreaScrollbar,\n};\n

"},{"type":"registry:file","target":"scroll-area/scroll-area-scrollbar.svelte","highlightedContent":"

<script lang=\"ts\">\n  import { ScrollArea as ScrollAreaPrimitive } from \"bits-ui\";\n  import { cn, type WithoutChild } from \"$lib/utils.js\";\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    orientation = \"vertical\",\n    children,\n    ...restProps\n  }: WithoutChild<ScrollAreaPrimitive.ScrollbarProps> = $props();\n</script>\n\n<ScrollAreaPrimitive.Scrollbar\n  bind:ref\n  data-slot=\"scroll-area-scrollbar\"\n  data-orientation={orientation}\n  {orientation}\n  class={cn(\n    \"data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent flex touch-none p-px transition-colors select-none\",\n    className\n  )}\n  {...restProps}\n>\n  {@render children?.()}\n  <ScrollAreaPrimitive.Thumb\n    data-slot=\"scroll-area-thumb\"\n    class=\"rounded-full relative flex-1 bg-border\"\n  />\n</ScrollAreaPrimitive.Scrollbar>\n

"},{"type":"registry:file","target":"scroll-area/scroll-area.svelte","highlightedContent":"

<script lang=\"ts\">\n  import { ScrollArea as ScrollAreaPrimitive } from \"bits-ui\";\n  import { cn, type WithoutChild } from \"$lib/utils.js\";\n  import Scrollbar from \"./scroll-area-scrollbar.svelte\";\n\n  let {\n    ref = $bindable(null),\n    viewportRef = $bindable(null),\n    class: className,\n    orientation = \"vertical\",\n    scrollbarXClasses = \"\",\n    scrollbarYClasses = \"\",\n    children,\n    ...restProps\n  }: WithoutChild<ScrollAreaPrimitive.RootProps> & {\n    orientation?: \"vertical\" | \"horizontal\" | \"both\" | undefined;\n    scrollbarXClasses?: string | undefined;\n    scrollbarYClasses?: string | undefined;\n    viewportRef?: HTMLElement | null;\n  } = $props();\n</script>\n\n<ScrollAreaPrimitive.Root\n  bind:ref\n  data-slot=\"scroll-area\"\n  class={cn(\"relative\", className)}\n  {...restProps}\n>\n  <ScrollAreaPrimitive.Viewport\n    bind:ref={viewportRef}\n    data-slot=\"scroll-area-viewport\"\n    class=\"size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1\"\n  >\n    {@render children?.()}\n  </ScrollAreaPrimitive.Viewport>\n  {#if orientation === \"vertical\" || orientation === \"both\"}\n    <Scrollbar orientation=\"vertical\" class={scrollbarYClasses} />\n  {/if}\n  {#if orientation === \"horizontal\" || orientation === \"both\"}\n    <Scrollbar orientation=\"horizontal\" class={scrollbarXClasses} />\n  {/if}\n  <ScrollAreaPrimitive.Corner />\n</ScrollAreaPrimitive.Root>\n

"}]}

Scroll Area

Default

Horizontal