스크롤 바로 인한 overflow 해결방법

스크롤바로 인해 발생하는 overflow를 해결한 과정을 정리해보았다.

첫 번째는 CSS를 사용하여 스크롤바 자체를 보이지 않게하는 방법이다.

.box {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
.box::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
}

하지만 웹접근성을 고려하면 좋은 방법은 아니다.

두 번째는 overflow:overlay를 통해 스크롤바 자체를 띄우는 방법이다.

.box {
  overflow: overlay;
}

하지만 이 방법은 webkit기반의 일부 브라우저에만 적용된다.

생각보다 해결 방법은 간단하였다.

react를 사용하여 spa를 만들경우 body 바로 아래에 div 태그를 만들어 거기에 동적으로 html을 삽입하게 된다.

보통 id를 root로 하여 사용하게 되는데, 이 root 아래의 컨텐츠의 overflow를 사용하기 위해 width와 height를 브라우저의 너비와 같도록 설정하게 된다.

너비를 기준으로 할 때엔 다음과 같은 두 가지 방법이 있다.

#root {
  width: 100vw;
  overflow-y: scroll;
}
/* 또는 */

html,
body,
#root {
  width: 100%;
}
#root {
  overflow-y: scroll;
}

나는 첫 번째 방법을 사용하고 있었는데, 100vw는 스크롤의 너비까지 포함된 값이였고, 100%는 스크롤의 너비를 포함하지 않는 값이기 때문에 아래와 같이 수정 해주었다.

스크롤바로 인해 발생하는 reflow를 없앨 수 있었다.