useLockBodyScroll

페이지의 스크롤을 제한하는 Hook입니다. 모달이나 팝업이 열렸을 때 배경의 스크롤을 막기 위해 사용합니다.

Props

이름	타입	설명	기본값
isLocked	`boolean`	스크롤 잠금 여부	`false`
preventShift	`boolean`	스크롤바 너비만큼 패딩을 추가할지 여부	`true`
preventTouchScroll	`boolean`	iOS Safari에서 터치 스크롤을 방지할지 여부	`true`

Usage

import { useLockBodyScroll } from '@teamsparta/react';
 
function Modal({ isOpen }) {
  useLockBodyScroll({ isLocked: isOpen });
 
  return isOpen ? (
    <div className="modal">
      <h2>모달 내용</h2>
    </div>
  ) : null;
}

Example

기본 모달

function BasicModal() {
  const [isOpen, setIsOpen] = useState(false);
 
  useLockBodyScroll({ isLocked: isOpen });
 
  return (
    <>
      <button onClick={() => setIsOpen(true)}>모달 열기</button>
      {isOpen && (
        <div className="modal">
          <div className="modal-content">
            <h2>모달 내용</h2>
            <button onClick={() => setIsOpen(false)}>닫기</button>
          </div>
        </div>
      )}
    </>
  );
}

레이아웃 시프트 방지 비활성화

function CustomModal() {
  const [isOpen, setIsOpen] = useState(false);
 
  useLockBodyScroll({
    isLocked: isOpen,
    preventShift: false, // 스크롤바 너비만큼 패딩을 추가하지 않음
  });
 
  return (
    <>
      <button onClick={() => setIsOpen(true)}>모달 열기</button>
      {isOpen && (
        <div className="modal">
          <div className="modal-content">
            <h2>모달 내용</h2>
            <button onClick={() => setIsOpen(false)}>닫기</button>
          </div>
        </div>
      )}
    </>
  );
}

모바일 터치 스크롤 허용

function MobileModal() {
  const [isOpen, setIsOpen] = useState(false);
 
  useLockBodyScroll({
    isLocked: isOpen,
    preventTouchScroll: false, // iOS Safari에서 터치 스크롤 허용
  });
 
  return (
    <>
      <button onClick={() => setIsOpen(true)}>모달 열기</button>
      {isOpen && (
        <div className="modal">
          <div className="modal-content">
            <h2>모달 내용</h2>
            <button onClick={() => setIsOpen(false)}>닫기</button>
          </div>
        </div>
      )}
    </>
  );
}

주의사항

여러 컴포넌트에서 동시에 사용할 수 있습니다.
컴포넌트가 언마운트되면 자동으로 스크롤이 복원됩니다.
preventShift 옵션으로 스크롤바 너비로 인한 레이아웃 시프트를 방지할 수 있습니다.
preventTouchScroll 옵션으로 iOS Safari에서의 터치 스크롤을 제어할 수 있습니다.
스크롤바 너비는 브라우저와 운영체제에 따라 다를 수 있습니다.
모달이나 팝업이 열릴 때만 isLocked를 true로 설정하는 것이 좋습니다.

useIsomorphicLayoutEffect usePreserveCallback