스크롤바 기능은 하지만 보이지는 않게 하기

가로 스크롤이나 세로 스크롤 영역이 생기면 자동으로 스크롤바가 생기게 된다.

세로 스크롤은 보통 놔두는 편이지만 가로 스크롤이 가능한 네비게이션 바를 만들 때는 스크롤바가 없는 게 자연스러워 없애려고 한다.

스크롤바를 없애려면 스크롤바가 생기는 부분에 브라우저 별로 스크롤바를 없애주는 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 */
}