Scroll Area

커스텀 스크롤바를 제공하는 스크롤 영역 컴포넌트입니다. 일관된 스크롤 경험을 제공합니다.

설치

Terminal

npx @msub-core/ui-cli add scroll-area

사용법

TSX

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

function MyComponent() {
  return (
    <ScrollArea className="h-[200px] w-[350px] rounded-md border">
      <div className="p-4">
        {/* 콘텐츠 */}
      </div>
    </ScrollArea>
  )
}

기본

항목 목록

항목 1

항목 2

항목 3

항목 4

항목 5

항목 6

항목 7

항목 8

항목 9

항목 10

항목 11

항목 12

항목 13

항목 14

항목 15

항목 16

항목 17

항목 18

항목 19

항목 20

항목 21

항목 22

항목 23

항목 24

항목 25

항목 26

항목 27

항목 28

항목 29

항목 30

항목 31

항목 32

항목 33

항목 34

항목 35

항목 36

항목 37

항목 38

항목 39

항목 40

항목 41

항목 42

항목 43

항목 44

항목 45

항목 46

항목 47

항목 48

항목 49

항목 50

Prop	Type	Default	Required	Description
className	string	-	No	스크롤 영역 스타일 클래스
type	"auto" \| "always" \| "scroll" \| "hover"	"hover"	No	스크롤바 표시 방식

수평 스크롤

카드 1

카드 2

카드 3

카드 4

카드 5

카드 6

카드 7

카드 8

카드 9

카드 10

카드 11

카드 12

카드 13

카드 14

카드 15

카드 16

카드 17

카드 18

카드 19

카드 20

텍스트 콘텐츠

긴 텍스트 콘텐츠

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod.

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.