[CSS] 스크롤바 가리는 방법

스크롤바는 필요하지만 디자인적으로 스크롤바를 가려야 하는 상황이 필요할 때, css로 간단히 스크롤바를 가릴 수 있는 방법이 있다.

Chrome, Safari, Opera

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

기본적으로 가장 많이 사용하는 Chrome 브라우저를 포함해서 Safari, Opera 브라우저에서도 먹히는 방법으로 -webkit-scrollbar 속성을 사용해서 숨김 처리가 가능하다.

Before

After

이 외에도 크로스브라우징을 위해, 위의 코드와 함께 아래 코드도 사용하면 보다 완벽한 숨김 처리가 가능해 진다!

Firefox

scrollbar-width: none;

Internet Explorer, Edge

-ms-overflow-style: none;