[react] Modal 스크롤 막기

 Modal창이 fixed면 스크롤이 있을 때 맨 상단으로 올라간다고 한다... 

position도 바꿔보고, body의 overflow를 hidden으로도 해봤는데 그래도 계속 맨 위에서 떴다. 

 

 구글링해서 가져온 코드에서 조금(이라고 썼지만 오래 걸렸다..) 수정했다.

Modal 이 켜질 때, 없어질 때에 body.style과 scroll을 바꾸는 식이다.

const body = document.querySelector("body") as HTMLElement;
  const [scrollPositions, setScrollPositions] = useState(window.scrollY);

  window.addEventListener("scroll", () => {
    if (window.scrollY !== 0) {
      setScrollPositions(window.scrollY);
    }
  });
 
  useEffect(() => {
    if (Modal.isOn) {
      console.log("켜져요");
      body.style.overflow = "hidden";
      body.style.position = "fixed";
      body.style.top = `-${scrollPositions}px`;
      console.log(body.style.top);
      body.style.left = "0";
      body.style.right = "0";
    } else {
      console.log("없어져요");
      body.style.removeProperty("overflow");
      body.style.removeProperty("position");
      body.style.removeProperty("top");
      body.style.removeProperty("left");
      body.style.removeProperty("right");
      window.scrollTo(0, scrollPositions);
   
    }

    return () => {};
  }, [Modal.isOn]);

 

 

 

https://im-developer.tistory.com/201

iOS 디바이스에서 body의 scroll을 막는 방법 (How to prevent body scrolling on iOS?)

 

https://yuddomack.tistory.com/entry/Modal-%EB%A7%8C%EB%93%A4%EA%B8%B0body-scroll-lock

Modal 만들기(body scroll lock)

http://daplus.net/javascript-%EB%AA%A8%EB%8B%AC%EC%9D%84-%EC%97%B4-%EB%95%8C-body%EA%B0%80-%EC%8A%A4%ED%81%AC%EB%A1%A4%EB%90%98%EB%8A%94-%EA%B2%83%EC%9D%84-%EB%B0%A9%EC%A7%80/

[javascript] 모달을 열 때 BODY가 스크롤되는 것을 방지 - 리뷰나라