Scroll Area

Scroll Area оборачивает содержимое, которое не помещается в отведённую высоту или ширину, и рисует полосу прокрутки скина вместо системной: тонкий ползунок-пилюля с тенью в прозрачной дорожке, темнее при наведении (компоненты scrollbar-v и scrollbar-h кита Tesseract). Размер области задаёт контейнер, полоса появляется только при переполнении.

Статус: draft · в системе с 2026-08 · интерактивность: always (всегда)

Когда использовать

Список, таблица или панель ограничены по высоте, а строк больше, чем помещается.
Широкое содержимое прокручивается по горизонтали внутри карточки или строки.
Прокручиваемой зоне нужна полоса скина, а не системная: панель меню, тело диалога, вложенный список.

Не использовать:

Содержимое помещается целиком — обёртка не нужна, полоса всё равно не появится.
Прокручивается вся страница — это область документа, а не компонент.
Нужен виртуальный список или бесконечная подгрузка — это поведение данных, Scroll Area только прокручивает.

Альтернативы:

table — Table задаёт структуру данных; при переполнении её оборачивают в Scroll Area, а не наоборот.

Вертикальная прокрутка

Список выше области получает вертикальную полосу у правого края.

Creative 1001 — banner 300×250
Creative 1002 — banner 300×250
Creative 1003 — banner 300×250
Creative 1004 — banner 300×250
Creative 1005 — banner 300×250
Creative 1006 — banner 300×250
Creative 1007 — banner 300×250
Creative 1008 — banner 300×250
Creative 1009 — banner 300×250
Creative 1010 — banner 300×250
Creative 1011 — banner 300×250
Creative 1012 — banner 300×250
Creative 1013 — banner 300×250
Creative 1014 — banner 300×250

<!--
  🟢

  Вертикальная Scroll Area: список строк выше отведённой высоты получает
  полосу скина у правого края. Высоту задаёт контейнер демо, а не компонент.
-->

<script>
import ScrollArea from "$lib/ui/ScrollArea.svelte";

const creatives = Array.from({ length: 14 }, (_, index) => `Creative ${1001 + index} — banner 300×250`);
</script>

<ScrollArea style="height: var(--sp-8); width: var(--control-field-min);">
	<ul style="margin: var(--sp-0); padding: var(--sp-0) var(--sp-2) var(--sp-0) var(--sp-0); list-style: none; display: grid; gap: var(--sp-0-5);">
		{#each creatives as creative}
			<li style="padding: var(--sp-0-5) var(--sp-0); font-size: var(--fs-s); color: var(--c-text);">{creative}</li>
		{/each}
	</ul>
</ScrollArea>

Горизонтальная прокрутка

Широкая лента меток прокручивается по горизонтали с полосой у нижнего края.

#CPA

#iGaming

#Affiliate_Malaysia

#Affiliate_Marketing

#SiGMA_Eurasia

#Malta_2024

#Adscompass

#Target

#Retargeting

#Brand_search

<!--
  🟢

  Горизонтальная Scroll Area: лента меток шире контейнера прокручивается по
  горизонтали, полоса скина лежит у нижнего края. Ширину задаёт контейнер демо.
-->

<script>
import ScrollArea from "$lib/ui/ScrollArea.svelte";
import Tag from "$lib/ui/Tag.svelte";

const tags = ["CPA", "iGaming", "Affiliate_Malaysia", "Affiliate_Marketing", "SiGMA_Eurasia", "Malta_2024", "Adscompass", "Target", "Retargeting", "Brand_search"];
</script>

<ScrollArea orientation="horizontal" style="width: var(--control-field-min);">
	<div style="display: flex; gap: var(--sp-1); padding-bottom: var(--sp-2); width: max-content;">
		{#each tags as tag}
			<Tag>#{tag}</Tag>
		{/each}
	</div>
</ScrollArea>