스크롤 영역

스크롤 영역 (Scroll Area)

브라우저 기본 스크롤 기능을 확장해서, 커스텀하고 브라우저마다 일관된 스타일을 적용할 수 있게 해 주는 컴포넌트예요. 콘텐츠가 넘치는 영역에 스타일링된 스크롤바를 입혀서 깔끔하게 보여줄 때 사용해요.

출처: 문서

본문

설치하기

CLI Manual 
npx shadcn@latest add scroll-area

다음 의존성을 설치해 주세요.

npm install @radix-ui/react-scroll-area

다음 코드를 프로젝트에 복사해서 붙여넣어 주세요.

import 경로를 프로젝트 설정에 맞게 바꿔 주세요.

사용하기

컴포넌트를 import 하고,

import { ScrollArea } from "@/components/ui/scroll-area"

높이와 너비가 제한된 ScrollArea 안에 콘텐츠를 넣으면, 영역을 넘치는 내용이 스크롤로 나타나요.

<ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">
  Jokester began sneaking into the castle in the middle of the night and leaving
  jokes all over the place: under the king's pillow, in his soup, even in the
  royal toilet. The king was furious, but he couldn't seem to stop Jokester. And
  then, one day, the people of the kingdom discovered that the jokes left by
  Jokester were so funny that they couldn't help but laugh. And once they
  started laughing, they couldn't stop.
</ScrollArea>

예시

가로 스크롤

더 알아보기 (Learn more)