우리는 여러 요구사항에 따라서 스크롤을 막을 필요가있습니다.
- 화면을 덮는 메뉴가 활성화 되었을때
- 페이지에 일부를 집중시켜야 할때
- 모달이 활성화 되었을때
스크롤을 차단하는 방법?
매우 쉽습니다. <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의 문제를 어떻게 해결할까?
유용한 기사를 발견했습니다.
제가 겪은 문제를 모두 서술하기보다 더 잘 정리되어있는 기사를 첨부하겠습니다.
저는 이제 scroll-lock 라이브러리로 당분간 <body> 스크롤과의 싸움을 끝낼것입니다.