모달 스크롤 이벤트 방지

모달이 생성되었을때, 부모 태그에서 이벤트를 방지해야했고, 

 

 useEffect(() => {
    if (!modalProp.toggle) {
      return;
    }
    const onScroll = (e: Event) => {
      e.preventDefault();
      e.stopPropagation();
      const html = document.querySelector('html') as HTMLElement;
      html.style.overflowY = 'hidden';
    };

    const onRemoveScroll = () => {
      const html = document.querySelector('html') as HTMLElement;
      html.style.overflowY = 'auto';
      window.removeEventListener('scroll', onScroll);
    };
    
    window.addEventListener('scroll', onScroll);
    return () => {
      onRemoveScroll();
    };
  }, [modalProp.toggle]);

하지만 이코드에서는, 모달에서 드래그이벤트가 발생하고 있을때, 모달이 닫혔을때,

이벤트가 남아있는 현상을 발견했다. 이를 해결하기 위해서

 

 useEffect(() => {
    if (!modalProp.toggle) {
      return;
    }
    const onScroll = (e: Event) => {
      e.preventDefault();
      e.stopPropagation();
      const html = document.querySelector('html') as HTMLElement;
      html.style.overflowY = 'hidden';
    };

    const onRemoveScroll = () => {
      setTimeout(() => {
        const html = document.querySelector('html') as HTMLElement;
        html.style.overflowY = 'auto';
      }, 1000);
      window.removeEventListener('scroll', onScroll);
    };
    window.addEventListener('scroll', onScroll);
    return () => {
      onRemoveScroll();
    };
  }, [modalProp.toggle]);

위 코드와 같이 구현하였다.

 

하지만. 문제중 하나는, overflowY 라는 값을 변경하는데, timeout을 사용하기 때문에,  UX적인 측면에서 문제가 발생한다.

이를 어떻게 해야할지 고민하고 있다.