HTML/CSS 스크롤바 숨기기 없애기 (스크롤 동작)

스크롤은 동작하지만 스크롤바를 숨기고 싶은 경우가 있어요.

 

예제를 통해 알아볼게요. 우선, 스크롤을 생성하겠습니다.

 

<div class="box" style="width: 200px; height: 100px; background: #F78181; overflow-y: scroll;">
    안녕하세요.<br>
    스크롤바 숨기기.<br>
    스크롤은 동작.<br>
    Scrollbar hide.<br>
    Scroll active.<br>
    스크롤바 숨기기.<br>
    스크롤은 동작.<br>
    Scrollbar hide.<br>
    Scroll active.<br>
</div>

 

안녕하세요.
스크롤바 숨기기.
스크롤은 동작.
Scrollbar hide.
Scroll active.
스크롤바 숨기기.
스크롤은 동작.
Scrollbar hide.
Scroll active.

스크롤바 숨기기 (Hide scroll bar)

.box {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
.box::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
}