[Vue3]안드로이드 키보드 스크롤 관련 이슈 2부
주니어 개발자의 고분분투기(2)
지난번 글에 이어
안드로이드에서 발생된 스크롤 이슈를 어떻게 접근하여 해결하였는지 소개해드리겠습니다.
해결방안
앞서 말씀드린 것 처럼 document 객체의 높이를 직접 줄이는 방법을 시도해보았습니다.
키보드가 열렸을 때의 document 객체의 높이에서 viewport의 높이를 빼서 키보드의 높이를 계산했습니다. (+1을 한 것은 단위의 문제 때문에 생기는 오류 방지를 위해서입니다.)
실제로 위의 코드처럼 document 객체의 clientHeight에 직접 키보드 높이 값을 넣거나, style.height 속성에 값을 넣었지만, 제대로 반영되지 않았습니다.
document 객체의 높이가 그대로 ..�그러므로 다른 방법을 찾아야합니다.
Chatting input이 키보드 위에 붙어 있기를 원한다면 input을 키보드의 높이 만큼 끌어올리면 될 것입니다. 위의 코드에서 changeHeight를 아래와 같이 바꾸는 것을 시도했습니다.
그리고 적용된 화면입니다.
하지만 거의 다 온 것 같습니다.
위 단계에서 해결이 되지 않는 이유는 뷰포트가 변할때마다 키보드 높이를 계산하여 input의 bottom 값을 바꿔줘야하기 때문입니다.
실질적 해결방안
그래서 다음과 같은 코드를 추가하였습니다.
onMounted(() => {
window.visualViewport.onresize = changeHeight;
})
위의 코드를 추가하면 스크롤이 정상적으로 작동되는 것을 확인할 수 있었습니다.
#onMounted() 훅을 한 이유는 Window 객체에 접근하기 위해서입니다.
일반적으로 이 훅은 컴포넌트의 렌더링 된 DOM에 접근해야 하는 사이드 이펙트를 실행하거나, 서버에서 렌더링 된 앱에서 DOM과 관련 코드를 클라이언트에서만 실행하도록 제한하는데에 사용됩니다.
이에 대한 자세한 설명은 다음에 새로운 글을 통해 설명해드리겠습니다.
(미래에 놓일 링크를 위한 공간)
이상 주니어 개발자의 이슈 해결을 위한 고분분투였습니다.
읽어주셔서 감사합니다.
©2023 thecompass. All rights reserved
