상현
개발 덕후

<body> 스크롤을 막자

( 업데이트: )

우리는 여러 요구사항에 따라서 스크롤을 막을 필요가있습니다.

  • 화면을 덮는 메뉴가 활성화 되었을때
  • 페이지에 일부를 집중시켜야 할때
  • 모달이 활성화 되었을때

스크롤을 차단하는 방법?

매우 쉽습니다. <body style=“overflow: hidden”>
overflow:hidden은 스크롤을 제거하고 스크롤 할 수 없게 차단합니다.

html, body {
    overflow: hidden;
}Code language: CSS (css)

하지만 Safari에서는?

네 모바일 Safari에서는 작동하지 않습니다.

  • Safari는 본문의 overflow를 무시합니다 그래서 터치 스크롤이 가능합니다.
  • long touch scroll은 일부 태그에 대한 drag and drop 동작이므로 스크롤 할 수 없습니다.

스타일에 대해서 많이 고민하고 적용도 해봤고 그다음 willmcpo/body-scroll-lock: Body scroll locking that just works with everything 😏 라이브러리를 알게되고 너무나 awesome했습니다.

간단하게 해결 할 수 있었죠.

그런데 문제가 생겼습니다.

  • body-scroll-lock으로 했을때 최상단으로 올라가는 문제
  • body-scroll-lock이 적용되고 w-full h-full로 적용되어있고 overflow-scroll 되어있는 영역이 스크롤 안되는 문제

100% 신뢰할수없는 라이브러리가되었다. 스타일에는 문제가없었는데 이런 문제가 생기니까 재대로 된 디버깅을 할 수 없었습니다.
그렇다면 대안이있을까?

body-scroll-lock의 문제를 어떻게 해결할까?

유용한 기사를 발견했습니다.

제가 겪은 문제를 모두 서술하기보다 더 잘 정리되어있는 기사를 첨부하겠습니다.

How to fight the \ scroll. First of all — WHY one have to fight… | by Anton Korzunov | React Camp | Medium

저는 이제 scroll-lock 라이브러리로 당분간 <body> 스크롤과의 싸움을 끝낼것입니다.