모바일 브라우저에서 scroll bar 노출되지 않게 하기

모바일에서 100vh 로 마크업한 페이지에 스크롤이 있는 경우가 있다.

원인은 뷰포트가 동적으로 바뀌기 때문이다. 모바일 브라우저에서는 주소표시줄 이 노출될 때도 있고 없어질 때도 있다.

이처럼 동적으로 높이가 바뀌는 경우 사용하기 좋은 새로운 단위가 있다. 바로 svh 와 lvh 단위이다. (width 동일)

물론 브라우저 버전에 따라 지원하는 유무가 달라지기 진다.

이를 위해 @support 지시어를 사용해서 사용가능한 브라우저는 새로운 단위를 사용하도록 작성하면 된다.

#root {
  height: 100vh;
}
 
@supports (height: 100svh) {
  #root {
    height: 100svh;
  }
}