[CSS] 스크롤바 없애기 (숨기기, 보이지 않게 하기)

2022. 12. 20. 00:06

지난 시간에는 스크롤 기능이 동작하게끔 만드는 방법에 대해 알아봤습니다. 이번 시간에는 스크롤 기능은 되도록 하는데 눈엣 가시같은 스크롤바를 화면에서 안 보이도록 할 것입니다. 디자인적으로 매우 추하기 때문입니다. 물론 스크롤바를 커스텀하는 방법이 있지만 지금은 아예 없애는 방법에 대해 언급할 것입니다. 혹시 스크롤바를 커스텀하는 방법이 궁금하시면 아래의 글을 참고하시기 바랍니다.

크롬 브라우저 사이드 스크롤바 CSS 커스텀 방법

아니 대체 왜!? 일부 사이트는 브라우저의 세로 스크롤바 가로 크기를 꼬딱지만하게 줄여놓는 것일까요? 클릭도 잘 안 되고 현재 어디까지 내려왔는지 눈에 띄지도 않습니다. 그래서 매우 불편

rgy0409.tistory.com

예제

먼저 예시를 살펴보겠습니다.

See the Pen CSS 스크롤바 없애기 by rgy0409 (@rgy0409) on CodePen.

두 개의 p태그가 있습니다. 첫번째 p태그 박스에는 세로 스크롤바가 보이는데 두번째 p태그 박스에는 스크롤바가 그 어디에도 없습니다. 하지만 둘 다 스크롤이 됩니다. 직접 마우스 휠로 올리고 내려보시기 바랍니다. 디자인 측면으로만 보면 확실히 두번째 p태그 박스가 훨씬 깔끔합니다. 대신 스크롤바를 육안으로 확인이 되느냐 안 되느냐에 따라 추가 콘텐츠가 더 있는지에 대한 판단이 확실히 됩니다. 두번째 박스보다는 스크롤바가 있는 첫번째 박스가 아래쪽으로 더 내용이 들어있겠다는 생각이 저절로 듭니다.

사용해보기

스크롤바를 화면상에서 사라지게 만드는 CSS 옵션은 아래와 같습니다.

선택자 {
    -ms-overflow-style: none; /* 익스플로러, 앳지 */
    scrollbar-width: none; /* 파이어폭스 */
}

선택자::-webkit-scrollbar {
    display: none; /* 크롬, 사파리, 오페라 */
}

한국에서 가장 많이 사용되는 크롬 브라우저의 경우 아래쪽 딱 하나의 CSS 옵션만 사용하면 되지만 호환성을 극한으로 끌어올리기 위해서는 모두 다 마크업하는것을 추천합니다.

/* 사이드바 시작 */
#sidebarWrap .sidebar {
    position: fixed;
    overflow-y: auto;
    top: 0;
    left: -180px;
    padding: 10px;
    height: 100%;
    border-radius: 0 20px 20px 0;
    transition: all .2s;
    box-shadow: 1px 0 5px 1px rgba(0, 0, 0, 0.5);
    -ms-overflow-style: none;
    scrollbar-width: none;
}

#sidebarWrap .sidebar::-webkit-scrollbar {
    display: none;
}

친효스킨2 (부재 : 아트북) 경우에는 위의 코드가 사용되었습니다. 위에서 언급한 모든 코드가 정상적으로 들어있음을 알 수 있습니다. 그렇기에 스크롤바가 직접 보여지진 않으나 스크롤 기능은 정상 작동합니다.