[html/css] css hide scroll bar example / css 로 스크롤 바 숨기는 방법

[html/css] css hide scroll bar example / css 로 스크롤 바 숨기는 방법

 

 

html 에서

 

특정영역에

 

생성되는 스크롤바를 노출시키고 싶지 않은 경우에는

 

아래와 같이 css 를 이용하면 

 

스크롤바를 노출하지 않고 스크롤 기능은 유지할 수 있습니다.

 

 

아래와 같이 main 이라는 클래스 명을 가지는

 

div 가 있다고 가정하고,

<div class="main" style="height:200px; overflow-y: scroll;">

</div>

 

 

IE 이거나 Firefox 브라우저의 경우는 아래와 같이,

.main {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

 

Chrome 이나 Safari 브라우저의 경우는 아래와 같이

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

 

css 를 적용하시면 됩니다!

 

참고들 하세요!