ScrollArea

İnce, token renkli scrollbar'ları olan bir kaydırma alanı. Kaydırma native kalır: tekerlek, dokunma, klavye, sayfa içi arama ve scroll anchoring çalışır; JavaScript'te hiçbir şey yeniden yazılmaz.

import { ScrollArea } from "@meridui/react";

export function Example() {
  return (
    <ScrollArea maxHeight={200} label="Sürüm geçmişi">
      <ul>
        {releases.map((release) => (
          <li key={release}>{release}</li>
        ))}
      </ul>
    </ScrollArea>
  );
}

Import

import { ScrollArea } from "@meridui/react";

Örnekler

Yatay, hover'da scrollbar

orientation ekseni seçer ("vertical", "horizontal" ya da "both"). autoHide, hassas imleçli cihazlarda scrollbar'ı yalnızca alan hover'dayken ya da focus'tayken gösterir.

<ScrollArea orientation="horizontal" autoHide label="Etiketler">
  <div style={{ display: "flex", gap: 8, width: "max-content" }}>
    {tags.map((tag) => (
      <Badge key={tag}>{tag}</Badge>
    ))}
  </div>
</ScrollArea>

API referansı

Tüm <div> attribute'larını kabul eder.

Stil verme

Scrollbar scrollbar-width: thin ve scrollbar-color kullanır (eski Safari için ::-webkit-scrollbar da var). Zorunlu renkler (forced colors) modunda sistem scrollbar'ı kullanılır.

Erişilebilirlik

İçerik taştığında ve içinde focus alabilen hiçbir şey olmadığında alan role="region", tabIndex={0} ve adı olarak label alır; böylece klavye kullanıcıları ona ulaşıp ok tuşlarıyla kaydırabilir (WCAG 2.1.1). İçinde link ya da buton varsa Tab sırasına girmez: onlara focus vermek alanı kaydırır.

İlgili sayfalar

• Table: kendi yatay kaydırma çerçevesi var (scrollLabel).
• Command: listesi aynı şekilde native kayar.