100vw가 수평 스크롤바를 일으키는 이유

This post is from my personal blog here

때때로 귀하의 사이트에 갑자기 가로 스크롤 막대가 나타나는 이유가 궁금하십니까? 오늘 나는 그것을 다시 만났고 (항상 😆) 어떻게 든 그것을 제거하는 방법을 알아 냈습니다. 여기 내가 디버그하고 수정하기 위해 취한 단계가 있습니다.

전역 테두리 또는 윤곽선 색상 트릭을 시도하여 원인이 되는 요소를 찾으십시오.

* {
  border: 1px solid red;
}

너비가 문서 너비보다 큰 요소 찾기(csstrick 이상)

var docWidth = document.documentElement.offsetWidth;

[].forEach.call(document.querySelectorAll('*'), function (el) {
  if (el.offsetWidth > docWidth) {
    console.log(el);
  }
});

대부분의 경우 오버플로의 원인인 100vw에서 항상 width 값을 찾습니다. 따라서 이 경우 대신 width: 100%로 교체하여 작동하는지 확인할 수 있습니다. 존재하는 경우 내부 요소도 시도하십시오.

제목으로 돌아가서 100vw 원인은 무엇입니까? 답은 다음과 같습니다.

When you set an element's width to 100vw, the element's width now will be the whole view width of the browser and the important part is 100vw does not include the vertical scrollbar's width into its calculation at all. Therefore, when there is a vertical scrollbar, the total width will be the sum of the element's width and the vertical scrollbar's width, which causes the overflow on the x-axis and thus the horizontal scrollbar.

도움이 되었기를 바랍니다!

😃 잘못된 부분이 있으면 바로 수정해주세요.