[CSS] 스크롤바 확실하게 숨기는 방법

[CSS] 스크롤바 숨기는 방법

css 스크롤바 숨기는 방법

---

 

요소 안에 담기는 컨텐츠의 길이가 요소보다 길어지게 되었을 때,

overflow: scroll  속성을 주게 되면

스크롤이 가능한 요소로 만들 수 있습니다.

 

overflow 속성에 대한 정리가 필요하시다면, 아래 포스팅을 참고해주세요.

overflow 관련 포스팅

 

이 때 다른 설정을 하지 않으면

 

리스트에 스크롤바가 노출됩니다.

 

 

CSS

.list {
    overflow: scroll;
    /* IE scroll 숨김 */
    -ms-overflow-style: none;
}

.list::-webkit-scrollbar { 
    display: none;
    width: 0 !important;
}

 

이럴 경우 위와 같이 CSS를 설정하면

스크롤 동작은 되면서 스크롤바가 숨김처리 됩니다.

---

 

반응형

 

예제

 

See the Pen hide scrollbar by nuhends (@nuhends) on CodePen.

 

 

 

포스팅이 여러분의 코딩에 조금이나마 도움이 되면 좋겠습니다.

 

글이 도움이 되셨다면 공감&댓글 부탁드립니다.
글 작성에 큰 힘이 됩니다. 🙂