모달이 열린 동안 배경 스크롤을 막고 스크롤바 폭을 보정해 레이아웃 점프를 방지.
한 줄 요약
locked가 true인 동안 body 스크롤을 잠그고, 사라지는 스크롤바 폭만큼 paddingRight를 보정해 콘텐츠가 튀지 않게 하는 훅입니다.
오버레이를 띄울 때 배경이 같이 스크롤되는 문제를 막아야 할 때 모달드로어바텀시트라이트박스 등.
잠금 시 현재 overflow/paddingRight를 저장한다.
스크롤바 폭(innerWidth - clientWidth)을 계산한다.
overflow:hidden + 보정 paddingRight를 적용한다.
해제언마운트 시 저장한 값을 그대로 복원한다.
보정을 안 하면 스크롤바가 사라지며 콘텐츠가 좌우로 튄다.
여러 오버레이가 겹칠 때를 대비해 복원 값을 정확히 관리한다.
document 접근은 effect 안에서만 SSR 안전.
공통 ModalDrawer의 배경 잠금
전체화면 라이트박스
import type { Metadata } from "next";
import { UseLockBodyScrollDemo } from "./-components/UseLockBodyScrollDemo";
export const metadata: Metadata = {
title: "useLockBodyScroll — 배경 스크롤 잠금 훅 (데모)",
description:
"모달·드로어를 열 때 배경 스크롤을 잠그고, 스크롤바 폭을 보정해 레이아웃 점프 없이 동작하는 useLockBodyScroll 훅 데모.",
robots: { index: false, follow: false },
};
export default function Page() {
// 스크롤 잠금을 보여주려면 임베드가 "스크롤되는" 고정 높이여야 한다 (자동높이면 스크롤바가 없어 효과가 안 보임)
return (
<main className="bg-white">
<UseLockBodyScrollDemo />
</main>
);
}