Portfolio


useLayoutEffect(() => {
    const detectMobileKeyboard = () => {
      const activeElement = document.activeElement;
			
			// 전체 높이가 줄어듬에 따른 스크롤 발생으로 인해 가상 키보드 활성화시 요소 포커싱 및 뷰 자동 스크롤 적용
      activeElement.focus();
      activeElement.scrollIntoView({ block: 'end' });
			
			// 예외상황에 따른 스타일 지정이 필요한 요소 CSS 처리
			// 1차적으로 이슈 해결한 방법은 가상 키보드가 활성화 된 상황에서는 버튼 요소를 안보이게 처리
      buttonRef.current.style.display =
        buttonRef.current.style.display === 'none' ? 'block' : 'none';
    };

		// 이벤트 등록
		// 모바일 웹 뷰의 경우 resize 가능한 요인이 현재는 가상 키보드 활성에 따른 경우만 발견
		// 모바일에서 확대 및 축소의 경우는 해당사항 없음을 발견 
    window.addEventListener('resize', detectMobileKeyboard);
		
		// 등록한 이벤트를 반드시 클린업
    return () => window.removeEventListener('resize', detectMobileKeyboard);
  }, []);

모바일 웹 뷰의 가상 키보드 활성화에 따른 기존 CSS 밀림 현상

🤔 발생 상황

👀 원인 파악(예상)

✔ 해결 과정

✨ Reference