[CSS] 스크롤바 없애기(숨기기)

파이어폭스와 익스플로러는 기타 브라우저와 다른 코드를 적용해줘야합니다.

 

예제 코드

 

코드

/* ( 크롬, 사파리, 오페라, 엣지 ) 동작 */
.scroll::-webkit-scrollbar {
  display: none;
}

영역::-webkit-scrollbar : 스크롤바 영역에 대한 설정으로 display: none 속성으로 스크롤바를 없앨 수 있습니다.

 

.scroll {
  -ms-overflow-style: none; /* 인터넷 익스플로러 */
  scrollbar-width: none; /* 파이어폭스 */
}

익스플로러, 파이어폭스는 -webkit-scrollbar 코드로 동작이 되지 않으며, 스크롤바를 숨기기 위해서는 다음과 같은 코드를 작성해야 합니다.

 

스크롤 기능 없애기

.scroll {
  overflow: hidden;
}

overflow: hidden 속성을 해당 요소의 영역을 벗어나는 자식들을 보이지 않도록 해주는 속성입니다. 영역을 초과할 일이 없으니 스크롤바도 생기지 않고, 기능도 사라지게 됩니다.