React 모바일환경 키보드 화면가림 대응하기

React 모바일 환경 키보드 화면가림 대응하기

---

window.visualViewport 를 활용해서, 모바일에서 키보드가 생기기 전,후의 높이 차이를 체크해 

스크롤링 해주는 방식으로 키보드 화면 가림현상에 대응했다.

 

@ 예시코드

  useEffect(() => {
    if (window) {
      let prevVisualViewport = window.visualViewport?.height;
      const handleVisualViewportResize = () => {
        const currentVisualViewport = Number(window.visualViewport?.height);
        if (
          prevVisualViewport &&
          prevVisualViewport - 30 > currentVisualViewport
        ) {
          const scrollHeight = Number(
            window.document.scrollingElement?.scrollHeight
          );
          const scrollTop =
            scrollHeight - Number(window.visualViewport?.height);
          window.scrollTo(0, scrollTop); // 입력창이 키보드에 가려지지 않도록 조절
        }
        prevVisualViewport = Number(window.visualViewport?.height);
      };

      if (window.visualViewport) {
        window.visualViewport.onresize = handleVisualViewportResize;
      }
    }
  }, []);

@적용전

적용 전

@적용후

적용 후