[HTML/CSS] 스크롤 기능만 살려보자!

overflow: auto를 통해 스크롤 기능을 추가하면
항상 기본에 속하는 못난이 스크롤이 나타난다.
이걸 없애고 모바일에서 사용을 고려하여 기능만 살려보려고 한다.

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

내가 주려는 영역의 클래스에 위의 코드처럼 css를 주면 된다.

또한, 모든 영역의 스크롤에게 동일한 스타일을 주고 싶다면

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

위의 코드와 같이 body에 주면된다!