useScrollLock

배경 스크롤을 차단하는 Hook입니다. Modal, Drawer, Sheet 등이 열렸을 때 배경 스크롤을 방지합니다. iOS Safari의 모멘텀 스크롤도 차단하며, 특정 요소는 스크롤을 허용할 수 있습니다.

미리보기

오버레이가 열리면 배경 스크롤이 잠기지만, 내부 스크롤 영역은 스크롤 가능합니다

사용법

1import { useState } from "react";
2import { Button } from "motile-ui";
3import { useScrollLock } from "motile-ui/hooks";
4
5export function ScrollLockDemo() {
6  const [isOpen, setIsOpen] = useState(false);
7
8  useScrollLock({
9    enabled: isOpen,
10    allowedSelectors: ["[data-scroll-allowed]"],
11  });
12
13  return (
14    <div>
15      <Button onClick={() => setIsOpen(true)}>
16        오버레이 열기
17      </Button>
18
19      {isOpen && (
20        <div className="overlay" onClick={() => setIsOpen(false)}>
21          <div className="content" onClick={(e) => e.stopPropagation()}>
22            <h3>useScrollLock 데모</h3>
23            <p>배경 스크롤은 잠겨있습니다</p>
24
25            {/* 스크롤 가능 영역 - data-scroll-allowed 속성 적용 */}
26            <div className="scroll-area" data-scroll-allowed>
27              {Array.from({ length: 20 }, (_, i) => (
28                <div key={i}>스크롤 항목 {i + 1}</div>
29              ))}
30            </div>
31
32            <Button variant="secondary" onClick={() => setIsOpen(false)}>
33              닫기
34            </Button>
35          </div>
36        </div>
37      )}
38    </div>
39  );
40}

API 레퍼런스

속성	타입	기본값	설명
`enabled`	`boolean`	`true`	스크롤 락 활성화 여부
`allowedSelectors`	`string[]`	`["[data-scroll-allowed]", ".sheet-content", ".modal-body"]`	스크롤을 허용할 CSS 선택자 배열