visualviewport (1) 썸네일형 리스트형 모바일 웹에서 키보드에 가려지는 input 스크롤 이슈 해결기 (iOS & Android) 모바일 웹을 개발하다 보면 생각보다 자주 마주치는 문제가 있다.바로 input에 포커스를 주었을 때 키보드가 올라오면서 입력창이나 유효성 메시지가 가려지는 현상이다.처음엔 scrollIntoView() 한 줄이면 간단히 해결될 줄 알았지만,기기마다 다르게 동작하는 브라우저 환경, iOS와 Android의 뷰포트 처리 차이,내부 스크롤/외부 스크롤 문제 등 예상치 못한 상황들이 연이어 발생했다. 이 글은 그 과정에서 겪은 시행착오와 최종적으로 어떻게 해결했는지를실제 코드와 함께, 하나씩 천천히 분석한 기록이다. 1. 문제 상황1) 유효성 체크 문구가 잘린 상태로 노출됨2) 전체 문구가 보이도록 input 포커스 시 자동 스크롤되도록 수정3) 자동으로 올라오는 키보드로 인해 Input 자체가 가려져서 노출.. 이전 1 다음