[React] 모바일 웹 스크롤 시 주소창, 하단바 없애기

 

문제 상황

---

좌: 진행중인 프로젝트 / 우: '야놀자' 모바일 웹

 

모바일에서 프로젝트를 볼 때, chrome이나 safari에서 하단바와 주소창이 화면을 너무 많이 가리는 모습입니다. 실제 서비스 중인 사이트들을 확인해보면 거의 대부분 스크롤 시 하단바가 사라지는 것을 확인했는데, 무언가 모바일에 추가설정이 필요한건가? 하는 생각이 들었습니다.

 

그래서 좀 찾아보니 크롬과 사파리 모두 특정 버전 이후부터는 스크롤 시 주소창과 하단 바가 자동으로 숨겨지는 기능을 가지고 있었습니다.

 

아니 근데 왜 제가 만든 웹은 자동으로 하단바가 사라지지 않는걸까요?? 한참 서치해봐도 잘 모르겠어서 가만히 제가 만든 걸 들여다보니 뭔가..갇혀있다는 느낌을 받았달까요? 그러니까 화면 자체가 내려가는 게 아니라 내부 박스안에서 스크롤이 되고 있는 느낌이었습니다.

생각해보니 모든 페이지 가장 바깥쪽 div에 공통적으로 height : 100vh 속성을 해두었는데요, 그게 문제였습니다...

 

해결방법

---

heigth : 100vh 대신  height : auto 와 min-height: 100vh를 사용했더니 문제가 해결되었습니다. 

상황에따라 조금씩 다를 것 같긴한데 포인트는 전체화면으로 스크롤되도록 하는 것이 중요합니다. 프로젝트를 살펴보고 박스 내부에서 스크롤 되도록 설정하지는 않았는지, height를 고정시켜놓지는 않았는지 확인해보시면 좋을 것 같네요!