모바일(iOS) Safari, Chrome 에서 100vh 스크롤 생기는 문제 종결

문제 인식

body 의 height 를 100vh 로 놓을 경우, 데스크탑에서는 문제없이 깔끔하게 적용되지만, iOS 모바일 에서는 100vh 가 하단 바까지 확장되어 스크롤이 발생합니다. 이는 사용자 경험이 깔끔하지 못한 문제를 발생시켜서, 하단 바를 제외한 높이를 100vh 로 인식하도록 하는 트릭을 사용하고자 합니다.

급하신 분을 위해 코드로 결론부터 먼저 제시해 드리고 아래에서 설명을 이어나가겠습니다.

해결코드

CSS, JS 각각의 처리가 필요합니다.

CSS

height: 100vh; /* 혹시나 Custom Property 지원 안하는 브라우저를 위한 복귀점(Fallback) */
height: calc(var(--vh, 1vh) * 100);

새로 추가된 CSS Custom Property 기능을 통해 vh 변수에다가 100 을 곱해줄겁니다. 이 vh 변수는 모바일에서 하단바를 제외한 부분을 100등분 나눈 값입니다. 일단은 1vh 로 할당해줬어요. vh 가 정의되지 않았을 수도 있으니까요. 그럼 이제 vh 가 어디서 정의될 것인가? 바로 뒤에 JS 에서 정의하여 덮어쓰는겁니다.

윗줄의 height:100vh; 는 안 써줘도 되는데 혹시나 Custom Property 지원 안해주는 IE 같은 브라우저가 있을까봐 해주는 겁니다.

JS

let vh = window.innerHeight * 0.01
document.documentElement.style.setProperty('--vh', `${vh}px`)
window.addEventListener('resize', () => {
let vh = window.innerHeight * 0.01
document.documentElement.style.setProperty('--vh', `${vh}px`)
})

프로그램이 실행되면 이 소스를 써줍니다. 원래 이벤트는 안 걸어줘도 되는데 혹시나 창크기 변경할거 대비해서 완벽하게 하려고 해주는 겁니다.

이 소스가 시사하는 바는 정말 큽니다. 그토록 하단바 까지 높이취급을 하던 모바일 브라우저가?? window.innerHeight 에서는 하단바가 제외된 높이값이 나온다는 겁니다. 정말 다행 또 다행입니다. 이제 이걸 재빠르게 캐치하여 100등분 하고 CSS Property 에 넣어주면 모바일화면에서 하단바 제외한 뷰포트의 1vh 가 몇 픽셀인지 계산이 완료되는 것입니다!

--

--

--

Developer

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
seop

seop

Developer

More from Medium

Styling an input range to have different track heights before and after the thumb

crossorigin=”anonymous”

Don’t use CSS classes in your tests!

Pure CSS animation #2: Metaballs