[css] 스크롤 기능은 작동하지만, 스크롤바는 안 보이게 하기

안녕하세요. 비스카이비전입니다. 오늘은 웹 페이지 특정 요소에서 스크롤이 작동은 하지만 스크롤은 보이지 않게 하는 방법에 대해 살펴보도록 하겠습니다. 

 

test라는 id를 부여받은 div 요소가 있다고 가정하겠습니다. 너비를 200px로 고정시켰고, 배경색은 하늘색을 넣어줬습니다. 

 

<div id="test" style="width: 200px; background-color:skyblue;">
    <p>안녕하세요.</p>
    <p>수많은 소음 속에서</p>
    <p>진짜 신호를</p>
    <p>찾아가는</p>
    <p>비스카이비전입니다.</p>
    <p>반갑습니다.</p>
    <p>오늘도 행복하세요.</p>
</div>

 

 

스크롤바 넣기

이 div 요소의 높이를 한정시킨 후 스크롤바를 넣어보겠습니다. 요소의 높이가 한정되어 있지 않으면 스크롤 기능이 들어가지 않습니다. 별도의 css 파일에서 id가 test인 요소의 스타일을 정의하겠습니다.

 

#test {
    width: 200px; 
    height: 200px;
    background-color:skyblue;
    overflow-y: scroll;
}

 

 

스크롤바가 생긴 것을 확인하실 수 있습니다.

 

스크롤 기능만 남기고, 스크롤바는 없애기

이제 스크롤 기능만 남기고 스크롤바는 없애보도록 하겠습니다. css 파일에 관련된 코드를 추가해주면 됩니다. 웹 브라우저별로 조금 다른 코드가 필요합니다. 주석을 참고하세요. 

 

#test {
    width: 200px; 
    height: 200px;
    background-color:skyblue;
    overflow-y: scroll;

    -ms-overflow-style: none; /* 인터넷 익스플로러 */
    scrollbar-width: none; /* 파이어폭스 */
}

#test::-webkit-scrollbar {
    display: none; /* 크롬, 사파리, 오페라, 엣지 */
}

 

크롬, 엣지, 인터넷 익스플로러, 파이어폭스에서 확인해본 결과 모두 잘 적용되었습니다. 스크롤바는 없어졌지만, 스크롤 기능은 잘 남아 있습니다.

 

 

그런데 저 스스로 약간 헷갈리는 부분이 있습니다. 원래는 -ms-overflow-style: none;을 넣어줘야 인터넷 익스플로러 뿐만 아니라 엣지에서도 스크롤바 없애기가 적용되는 걸로 알고 있었는데, 지금은 크롬, 사파리, 오페라에 필요한 코드를 넣었을 때 엣지에서도 스크롤바 없애기가 적용됩니다. 아마도 크롬과 엣지가 같은 크로미움 엔진(?)을 써서 그런 것 같습니다.