css react프로젝트에서 스크롤바로 인한 잉여부분이 생길 시 해결법

문제상황

cra로 만든 리액트 프로젝트의 어떤 요소 width가 100vw고 스크롤바가 존재한다면, 브라우저에따라 오른쪽의 스크롤바 너비 만큼의 잉여부분이 생긴다.

 

해결법

1. 스크롤바를 없애버린다.

index.css

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -ms-overflow-style: none;
}

::-webkit-scrollbar {
  display: none;
}

 

2. 애초에 스크롤을 허용하지 않는다.

overflow: hidden;

단, 이럴땐 기획/디자이너와 협의해 어떻게 요구사항을 충족할건지 논의해봐야한다.

 

3..  root을 손본다.

public/index.html을 따로 손보지 않았을 때 개발자 도구를 열어보면 <div id = "root">안에 자신이 만든 모든 컴포넌트가 속해있음이 보일 것이다. root은 가상 돔에 랜더링돼서 실제 돔에 랜더링된 결과물들이 나타나는 곳이다.

#root{
  overflow-x: hidden;
}

 

그래서 root에서, 가로 스크롤을 막아버리면 해결된다. 

 

4. 스크롤바 너비가 존재하는 브라우저에서(스크롤바는 브라우저마다 형태가 다르다.), 스크롤바 너비를 계산해 그만큼 제외해준다.