CSS로 스크롤바 숨기는 방법 – overflow: hidden 활용 가이드

CSS를 활용하면 몇 줄의 코드만으로 웹 페이지의 스크롤바를 깔끔하게 숨길 수 있습니다. 핵심은 overflow 속성입니다.

핵심 원리: overflow: hidden

overflow: hidden;은 요소의 크기를 벗어나는 콘텐츠를 잘라내어 표시하고, 스크롤바를 생성하지 않습니다. 이 속성을 body에 적용하면 페이지 전체에서 세로·가로 스크롤바가 모두 사라집니다.

예제 코드

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        height: 150vh;
        width: 200vw;
        overflow: hidden;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    p {
        font-size: 40px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>Hide scrollbars Example</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia expedita magnam enim culpa eum veniam obcaecati odit aperiam dolorem, libero nisi magni similique eveniet sequi? Laudantium ipsam dolorum recusandae ab molestiae animi saepe cumque delectus libero quaerat? Assumenda asperiores ea incidunt totam ipsa aperiam! Ex quo cupiditate incidunt vel accusamus!
</p>
</body>
</html>

실행 결과

위 코드를 실행하면 화면 크기를 벗어나는 콘텐츠가 있음에도 불구하고 스크롤바 없이 페이지가 표시됩니다.

CSS로 스크롤바 숨기는 방법 – overflow: hidden 활용 가이드

응용: 스크롤은 유지하면서 스크롤바만 숨기기

스크롤 기능은 그대로 두고 스크롤바만 감추고 싶다면 overflow: hidden 대신 아래 방법을 사용할 수 있습니다.

Firefox: scrollbar-width: none;
Chrome, Safari, Edge: ::-webkit-scrollbar { display: none; }

단, 스크롤바를 숨기면 사용자가 스크롤 가능 여부를 인지하기 어려워질 수 있으므로, 사용자 경험(UX)을 고려해 신중하게 적용하는 것이 좋습니다.