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; /* 크롬, 사파리, 오페라, 엣지 */ 👈
}

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