[CSS] 100vw vs 100% – 스크롤바 때문에 생기는 의외의 레이아웃 깨짐 해결법

제가 참여했던 잡생각 프로젝트에서는 HeroSection에 스크롤에 따른 타이포그래피 애니메이션을 넣게 되었습니다. 스크롤에 따라 폰트가 점점 커지는 모션에서 자연스럽게 다음 섹션의 black 화면으로 넘어갈 수 있도록 구현했었는데요.

 

이때 애니메이션 효과를 위해 추가한 요소였던 BlackSection으로 인하여 어마어마한 가로 스크롤이 생겼었고,

이를 방지하기 위해 overflow-x: hidden을 적용했었습니다.

 

그런데?!

HeroSection에 overflow-x: hidden을 잘 적용했음에도 계속해서 오른쪽에 거슬리는 black 영역이 나타났습니다!!

사소하지만, 우리 서비스의 첫 진입 영역이므로 어떤 디테일도 오차가 있으면 안됩니다!!

 

결론은

애니메이션을 위해 추가한 요소들로 인하여 가로 스크롤이 생기는 현상을 방지하기위해 함께 추가했던 100vw가 문제였습니다. 

100vw는 오른쪽의 스크롤바도 포함한 값이기 때문에, 스크롤바 영역만큼 모자라게 되어서 BlackSection이 해당 영역만큼 보이게 된것입니다!!

 

그래서

모든 영역을 100%로 변경해주었고, 아래와 같이 깔끔하게 수정되었습니다.