CSS 스크롤 위, 아래로 당겼을때 흰색 노출 막기

리액트에서 body에 배경색을 지정하고 스크롤을 위 아래로 당겼을때 흰색이 노출 되는 문제를 해결 하고 싶었다.

- 문제된 css

*{
  box-sizing: border-box;
}

body{
width: 100vw;
height: 100vh;
background: #b92b27; 
background: -webkit-linear-gradient(to right, #1565C0, #b92b27);
background: linear-gradient(to right, #1565C0, #b92b27); 
}

- 문제되는 부분

- 해결 방법 1

linear-gradient 속성은 background-color 속성이 아니라 background-image나 background 속성으로 주어야한다.

그렇기 때문에

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  background-color: #b92b27;
  background-image: linear-gradient(to right, #1565C0, #b92b27);
}

이런식으로 background-color 와 background-image 속성을 따로따로 설정해주어야한다.

하지만 이런식으로 설정했을때, background-color 에는 linear-gradient 속성을 적용시킬 수 없기 때문에 스크롤이 넘어갔을때 backgorund-color 색상이 적용되어서 어색해 보일수 있는 문제가 발생했다.

- 해결 방법 2

아예 body 쪽에 overflow: hidden; 속성을 줌으로써 스크롤 창 자체를 닫아버린다.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  background-color: #b92b27;/* 이 부분은 적용 안됨*/
  background-image: linear-gradient(to right, #1565C0, #b92b27);
  overflow: hidden;
}

- 해결 방법 3

background-color 나 background-image 에서 내장 색상을 정해주지 않고 이미지를 사용해서 배경화면을 지정해준다.

- 배경화면으로 사용할 이미지

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  background: #000 url('./assets//background_img.png');
  -webkit-overflow-scrolling: touch; /* 스크롤 부드럽게 처리 */
}

이런식으로 background 자체에서 background-color 속성으로 검정색을 지정해주고, background-image 로 지정할 이미지를 지정해주면 스크롤을 할때 흰색 화면이 없어진다.