[리액트] 모바일 웹 브라우저에서 가상 키보드 오픈 시 스크롤 내리기

웹챗을 데스크탑 브라우저로만 보다가 모바일 웹으로 보니까 모바일 가상 키보드가 메세지 리스트를 가리면서 나타나는 현상이 있었다. (매우 부자연스럽...)

 

입력창에 포커스될 때 메세지 리스트 div를 스크롤 다운 해줘야 할 필요가 생겼다.

 

import classNames from "classnames/bind";
import React, { useRef, useLayoutEffect } from "react";
import { MessageList } from "../../organisms";
import { MessageInput } from "../../molecules";
 
const cx = classNames.bind(styles);
 
const ChattingLayout = _ => {
  const listRef = useRef();
  
  useLayoutEffect(_ => {
    const detectMobileKeyboard = _ => {
      if(document.activeElement.tagName=="INPUT"){
        listRef.current.scrollIntoView({ block: 'end' });
      }
    }
 
    window.addEventListener("resize", detectMobileKeyboard);
 
    return _ => window.removeEventListener("resize", detectMobileKeyboard);
  }, []);
  
  return (
    <div className={cx("wrapper")}>
      <div className={cx("messages-section")}>
        <MessageList
          innerRef={listRef}
          { ...rest }
        />
      </div>
      <div className={cx("input-section")}>
        <MessageInput />
      </div>
    </div>
  );
}

가상 키보드가 보이면 화면 상 크기가 resize되는 이벤트가 걸릴 수 있다는 걸 알게 되었다!_!

 

따라서 window 객체에 resize 이벤트를 등록하고 activeElement가 INPUT이면 해당 element를 스크롤 시켰다.

(언마운트될 때 이벤트 제거하는거 잊지 말기)

 

- 참고한 URL

https://stackoverflow.com/questions/23757345/android-does-not-correctly-scroll-on-input-focus-if-not-body-element

Android does not correctly scroll on input focus if not body element

 

(참고) 크롬으로 모바일 가상 키보드 테스트할 때

 

개발툴에 > toggle device toolbar 클릭 후 디바이스종류를 Nexus5, Nexux 5X로 설정하면 가상 키보드 버전을 테스트할 수 있다.

 

헤더 우측에 Screen Options을 누르면 다음처럼 Portrait - keyboard가 가상 키보드를 오픈한 상태를 말한다.

기본 화면

 

가상 키보드 오픈한 화면