[CSS] 스크롤바 숨기기

 

예제

See the Pen hide Scrollbar by Kim Ui Hyun (@uihyunKimm) on CodePen.

 

 

코드

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

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

 

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

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

 

.scroll {
 overflow: hidden;
}

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