[HTML/CSS] 스크롤 기능은 살리고 스크롤바는 없애기

스크롤 기능은 존재하되, 스크롤바가 보이지 않는 css 효과에 대해 알아봅시다!

 

💡 스크롤 기능은 살리고, 스크롤바는 없애는 방법?

<<스크롤 Active>>

    안녕하세요.

    스크롤바 없애기

    스크롤은 동작.

    Scrollbar hide

    Scroll active

    스크롤 기능은 살리고

    스크롤바는 없애기

    Scrollbar hide

    Scroll active

 

<<자체 CSS 설정>>

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

body{
 -ms-overflow-style: none;
 }
 
::-webkit-scrollbar {
  display: none;
}

/*특정 부분 스크롤바 없애기*/

.box{
   -ms-overflow-style: none;
}
.box::-webkit-scrollbar{
  display:none;
}

 

👉🏻 style 시트에 위의 코드를 복사해서 넣어주면 됩니다. 전체 페이지 스크롤바가 아닌 특정 div의 스크롤을 없애고싶다면 위와 같은 방식으로 css를 설정해주시면 됩니다.