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

Westagram 스크롤 기능은 살리고 스크롤바는 없애기

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

💡먼저, 스크롤 기능을 추가하려면?

<div class="box" style="width: 200px; height: 100px; background: black; color: white; overflow-y: scroll;">
    안녕하세요.<br>
    어쩌다 이곳에 오셨나요? <br>
    스크롤바 기능을 구현하려고 하시나요?<br>
    그런데 스크롤바는 없애고 싶은가요?<br>
    얼른 알려드리겠습니다. <br>
    조금만 밑으로 내려주세요.<br>
    다왔습니다.<br>
    이 스크롤 바가 아니고 전체 스크롤바를 내려주세요.<br>
    😎<br>
</div>

🙋‍♀️ 전체 스크롤 바를 없애고 싶어요!

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

🙋‍♂️ 특정 부분 스크롤바를 없애고 싶어요!

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

* 참고 사항

1. overflow: visible;
기본값. 사이즈를 넘 칠경 우 글이 상자 밖으로 보임.

2. overflow: hidden;
사이즈를 넘 칠경 우 글이 잘림.

3. overflow: scroll;
사이즈를 넘칠경우 가로 세로 모두 스크롤이 추가.

4. overflow: auto;
양에 따라 스크롤이 자동으로 추가될지 결정.

5. overflow-x, overflow-y
가로, 세로 overflow를 각각 제어하고자 한다면 overflow-x와 overflow-y를 사용.

출처: https://wooaoe.tistory.com/49 [개발개발 울었다]