모달창에서 body scroll 막기

fixed로 화면을 덮는 모달을 열었을 때 모달창이 덮고 있는데 외부 화면이 스크롤 되는게 어색하다는 QA가 있었다.

모달 open state에 따라 외부 화면도 fixed <-> static으로 변경하면 외부화면도 고정이 되었지만 외부화면의 스크롤이 최상단으로 초기화되는 문제가 있었다.

처음에 생각했던대로 event.preventDefault(); 로 막아야겠다는 생각을 했지만
이벤트 리스너에 scroll이 아닌 wheel 이벤트인 것을 알게되어서 조치할 수 있었다.

// 방법 1.
const [isOpen, setIsOpen] = useState(false);

const preventScroll = (e: Event) => {
  e.preventDefault();
}
useEffect(() => {
  const { body } = document;
  if (isOpen) {
    body.addEventLitener('wheel', preventScroll, {passive: false})
  }
  return () => {
    body.removeEventListener('wheel', preventScroll)
  }
}, [isOpen])

• wheel 같은 passive 이벤트는 preventDefault 사용하려면 passive false가 필요하다

// 방법 2.
  useEffect(() => {
    const html = document.documentElement;
    if (isOpen) {
      html.style.overflowY = 'hidden';
    } else {
      html.style.overflowY = 'auto';
    }
    return () => {
      html.style.overflowY = 'auto';
    };
  }, [isOpen]);

• 키보드로 화면을 내리는 것까지 막을 수 있다

참고

https://alvarotrigo.com/blog/prevent-scroll-on-scrollable-element-js/