스크롤은 되지만 스크롤바는 숨기고 싶을 때? CSS로 이중 스크롤 깔끔하게 해결하는 법

웹 페이지나 블로그, 커스텀 UI를 작업하다 보면, 스크롤은 가능해야 하지만 스크롤바는 보이지 않게 하고 싶은 경우가 생깁니다. 특히 아래 이미지처럼, 오른쪽과 아래쪽에 스크롤바가 이중으로 생겨 디자인을 해치는 경우 이를 깔끔하게 없애고 싶을 때가 많죠.

그렇다면 스크롤 기능은 그대로 유지하면서 스크롤바만 보이지 않게 만들 수 있을까요?
정답은 YES! CSS를 활용하면 간단하게 가능합니다.

---

✅ CSS로 스크롤바 숨기기 (스크롤은 유지)

아래 코드를 통해 스크롤 기능은 살리되, 스크롤바만 감출 수 있습니다.

💡 전체 페이지(HTML, body)에 적용하는 방법

html, body {
  overflow: auto;
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE, Edge */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;                /* Chrome, Safari, Opera */
}

위 코드는 모든 주요 브라우저를 대상으로 스크롤바를 숨깁니다.
스크롤은 그대로 작동하므로, 사용자는 마우스 휠이나 터치 스크롤로 콘텐츠를 탐색할 수 있습니다.

---

🎯 특정 영역(div 등)에만 적용하고 싶다면?

<div class="scroll-hidden">
  <!-- 여기에 스크롤 가능한 콘텐츠가 들어갑니다 -->
</div>

.scroll-hidden {
  overflow: auto;
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE, Edge */
}

.scroll-hidden::-webkit-scrollbar {
  display: none;                /* Chrome, Safari */
}

✨ 이 방법은 특정 요소에만 적용하고 싶을 때 유용하며, 스크롤 영역이 페이지 전체가 아닌 경우에 적합합니다.

---

🎨 UI를 깔끔하게 만들기 위한 팁

• 스크롤 힌트를 추가해 사용자가 스크롤 가능 영역임을 인지하도록 하는 것이 좋습니다.
  예) 흐림 처리된 콘텐츠, 아래로 스크롤하라는 화살표 등
• 또는 마우스를 올렸을 때만 스크롤바를 보이게 설정할 수도 있습니다.

---

📌 자주 묻는 질문 (FAQ)

Q1. 모든 브라우저에서 이 방법이 통하나요?
A1. 네, 위에서 설명한 세 가지 속성(scrollbar-width, -ms-overflow-style, ::-webkit-scrollbar)은 대부분의 주요 브라우저에서 작동합니다.

Q2. 스크롤이 가능한지 사용자가 몰라서 혼란스러울 수 있지 않나요?
A2. 맞습니다. 그렇기 때문에 시각적 힌트(스크롤 유도 이미지, 흐림 처리 등)를 추가해주는 것이 UX 면에서 좋습니다.

Q3. CSS만으로 이중 스크롤도 완전히 없앨 수 있나요?
A3. 스크롤바를 숨기는 것 외에도 이중 스크롤 자체를 막기 위해 overflow 구조를 점검하고, 불필요한 height: 100vh 등 중첩 구조를 피하는 것도 중요합니다.

---

📝 마무리 정리

목적	방법
스크롤은 가능, 스크롤바는 숨기기	CSS로 scrollbar-width, -ms-overflow-style, ::-webkit-scrollbar 설정
특정 요소에만 적용	클래스를 사용해 개별 적용
사용자 혼란 방지	스크롤 힌트 제공 (아이콘, 애니메이션 등)

디자인을 깔끔하게 유지하면서도 사용자 경험을 해치지 않으려면, 스크롤바를 보이지 않게 하되 스크롤 가능성을 암시하는 요소와 함께 사용하는 것이 핵심입니다.

---

스크롤바 없이 더 깔끔한 UI를 만들고 싶으셨다면, 오늘 소개한 CSS 팁을 꼭 적용해보세요!