스크롤바 숨기기

 

이전에 누구나 쉽게 가로 스크롤 메뉴 적용하기라는 주제로 글을 작성한 적이 있습니다. 그곳에 어떤 분이 댓글로 질문을 해주셨는데요.  질문의 내용은 스크롤을 없애고 싶다는 것이 요점이었습니다. 

우선 스크롤바를 사라지게 하는 방법으로는 스크롤 기능을 유지할 것인지, 스크롤 기능이 적용되지 않게 해서 스크롤을 없애달라는 것인지에 따라 방법이 나뉘게 됩니다.  

스크롤 자체를 막고 싶다면 CSS 속성 overflow: hidden을 사용하면 스크롤 기능이 사라지게 됩니다. 

 

아마 저분의 질문은 모바일이 아닌 웹에서 스크롤 기능은 유지하면서 스크롤 바의 모양만 없애고 싶었던 것 같습니다.  그 경우에는 아래 속성을 적용해 주면 됩니다. 

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

 

ul요소는 가로 스크롤이 적용되는 요소입니다. 

제가 작성한 가로 스크롤 글에서는. scroll__wrap요소에 위의 코드를 추가해주면 됩니다. 

 

 

감사합니다.

 

참고 : https://stackoverflow.com/questions/3296644/hiding-the-scroll-bar-on-an-html-page