문제 상황

가끔 토이 프로젝트를 만들다보면 스크롤의 존재 여부가 은근히...UI에 방해가 될 때가 있다.
이를 제거해보자. 물론, 기능은 그대로 존재하고!

해결 방법

모든 페이지에 적용

모든 페이지에서 스크롤을 없애기 위해서는 글로벌 스타일에 이를 적용하면 된다.
필자는 React로 프로젝트를 만들었기에 글로벌 스타일이 index.css에 존재한다.

/* scr/index.css */

/* IE는 따로 설정해줘야한다. */
body{
 -ms-overflow-style: none;
 }

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

위 코드를 추가해주면 모든 페이지에서 스크롤을 숨길 수 있다.

원하는 페이지에만 적용

만약 원하는 페이지에서만 숨기고자 한다면 어떻게 해야할까? 방법은 같다.
해당 페이지의 css 파일에만 저 속성을 작성하면 된다.

/* scr/onlyOne.css */

/* IE는 따로 설정해줘야한다. */
.only{
 -ms-overflow-style: none;
 }

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

이러면 only 클래스를 가진 컴포넌트만 overflow시 등장하는 스크롤이 사라질 것이다.

엥? 난 하나의 페이지에서만 숨기는걸 알고싶은데?? 네, 그것도 똑같습니다.
특정 페이지에만 적용하려면 페이지 요소들을 감싸고 있는 가장 상위 컴포넌트에 코드를 적용시키면 될 것이다.

IE용 대응 코드를 적어놓긴했지만, 이제 IE는 빠이빠이가 되었기 때문에...ㅎㅎ

참교 자료

참고 자료 1
참고 자료 2
참고 자료 3