[CSS] 스크롤바 숨기기

 

 

 

매번 검색하는 스크롤바 숨기기.. 이참에 정리해보자!

 

가로 스크롤이나 세로 스크롤 영역이 생기면 자동으로 스크롤바가 생기게 된다. 스크롤바를 없애려면 스크롤바가 생기는 부분에 브라우저 별로 스크롤바를 없애주는 css를 추가해주면 된다.

 

아래와 같이 코드를 사용하면 IE, Edge, Firefox, Chrome, Safari, Opera 등의 브라우저에서 스크롤바를 없애도록 대응할 수 있다.

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

 

 

 

참고

https://dev.to/dailydevtips1/css-hide-scrollbars-2na0