React Hook

useLockBodyScroll

오버레이를 띄울 때 배경 스크롤을 잠그고, 사라지는 스크롤바 폭만큼 paddingRight를 보정해 레이아웃 점프를 막습니다.

스크롤 잠김OFF
스크롤바 보정 paddingRight0px

아래로 스크롤되는 긴 콘텐츠가 있습니다. 모달을 열거나 스위치를 켜면 이 배경이 더 이상 스크롤되지 않습니다.

1

스크롤 확인용 콘텐츠 1

잠금이 켜지면 이 영역이 움직이지 않습니다.

2

스크롤 확인용 콘텐츠 2

잠금이 켜지면 이 영역이 움직이지 않습니다.

3

스크롤 확인용 콘텐츠 3

잠금이 켜지면 이 영역이 움직이지 않습니다.

4

스크롤 확인용 콘텐츠 4

잠금이 켜지면 이 영역이 움직이지 않습니다.

5

스크롤 확인용 콘텐츠 5

잠금이 켜지면 이 영역이 움직이지 않습니다.

6

스크롤 확인용 콘텐츠 6

잠금이 켜지면 이 영역이 움직이지 않습니다.

7

스크롤 확인용 콘텐츠 7

잠금이 켜지면 이 영역이 움직이지 않습니다.

8

스크롤 확인용 콘텐츠 8

잠금이 켜지면 이 영역이 움직이지 않습니다.

9

스크롤 확인용 콘텐츠 9

잠금이 켜지면 이 영역이 움직이지 않습니다.

10

스크롤 확인용 콘텐츠 10

잠금이 켜지면 이 영역이 움직이지 않습니다.

11

스크롤 확인용 콘텐츠 11

잠금이 켜지면 이 영역이 움직이지 않습니다.

12

스크롤 확인용 콘텐츠 12

잠금이 켜지면 이 영역이 움직이지 않습니다.

13

스크롤 확인용 콘텐츠 13

잠금이 켜지면 이 영역이 움직이지 않습니다.

14

스크롤 확인용 콘텐츠 14

잠금이 켜지면 이 영역이 움직이지 않습니다.