웹 페이지를 만들 때 스크롤이 가능하게 하면서도 스크롤바를 숨겨야 할 경우가 있습니다. 모바일 기기에서는 스크롤바가 평소에는 보이지 않다가 스크롤 중에 희미하게 보이지만 데스크톱에서는 오른쪽에 자리를 차지하고 있는데, 이 때 overflow: hidden;으로 CSS를 지정하면 스크롤바는 숨겨지지만 스크롤이 되지 않습니다. 다만, 모종의 방법을 사용하면 스크롤바가 숨겨진 상태에서도 스크롤이 가능하게 구현할 수 있습니다.
스크롤바를 숨기고 웹 페이지를 스크롤할 수 있게 하는 방법은 몇 가지가 있는데,
1. <div> 태그를 이용하는 방법
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Scrolling with hidden scrollbar sample</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
body, #pseudo_body {
overflow: hidden;
margin: 0;
}
#outer_container {
overflow-x: hidden;
width: calc(100% + 20px);
float: left;
}
#inner_container {
margin: 8px;
}
</style>
<script type="text/javascript">
function window_resized() {
document.getElementById("pseudo_body").style.height = window.innerHeight + "px";
document.getElementById("outer_container").style.height = window.innerHeight + "px";
document.getElementById("inner_container").style.width = (window.innerWidth - 16) + "px";
}
</script>
</head>
<body onload="window_resized();" onresize="window_resized();">
<div id="pseudo_body">
<div id="outer_container">
<div id="inner_container">
<h1>Scrolling with hidden scrollbar</h1>
<p>Contents...</p>
</div>
</div>
</div>
</body>
</html>
이 방법은 일단 웹 페이지 형태를 구성하는 최상위 요소인 body의 여백을 없애고 스크롤바가 나타나지 않게 합니다. 그리고 그 안에 outer_container라는 div 요소를 만들어 높이는 브라우저 영역의 높이와 같게, 폭은 브라우저 영역보다 20px 정도 넓게 하여 오른쪽에 스크롤바가 숨겨집니다. 그리고 또 그 안에 inner_container라는 div 요소를 만들어 높이는 안의 내용에 따라 유동적으로 변하게 하고 폭은 브라우저 영역의 폭과 같게 합니다. 또한, 웹 페이지를 읽어들이고 창 크기가 조절될 때마다 크기가 알맞게 조절되는 자바스크립트가 실행되는 처리를 합니다. 13번 줄부터 27번 줄까지의 자바스크립트가 이 역할을 합니다. 제이쿼리를 사용한다면 더 짧게 할 수 있습니다.
* 모바일에서는 넓게 잡힌 outer_container 영역 때문에 옆으로 스크롤되는 경우가 있어 그 위에 요소를 추가합니다.
이 방법은 코드가 복잡해진다는 단점이 있지만 표준 CSS의 범위 내에서 구현할 수 있다는 장점이 있습니다. 가급적이면 이 방법을 권장합니다.
위의 예제에서는 여백이 없기 때문에 내용이 브라우저 창 영역에 붙어서 나타납니다. 여백(margin)을 주려면 예를 들어 여백이 8px인 경우 inner_container의 폭은 창의 안쪽 폭에서 16px 뺀 값으로 하는 등 별도의 처리가 필요합니다.
2. 자체 CSS를 이용하는 방법
body::-webkit-scrollbar {
display: none;
}
이 CSS 코드는 body 요소의 스크롤바를 숨기는 코드입니다. 이 방법은 앞의 방법과는 달리 <div> 태그를 겹치고 자바스크립트를 넣어야 하는 번거로움이 없다는 장점이 있습니다. 다만, 비표준 코드이고 구글 크롬 등 웹키트 엔진을 내장한 브라우저에서만 적용된다는 단점이 있습니다.
1번 방법을 사용한 예: https://pjw48.net/samp/hidden_scrollbar_sample.html
이 포스트에서 설명한 방법은 웹 페이지 전체를 스크롤바 없이 스크롤하는 방법에 적용되지만, 같은 방법으로 웹 페이지 전체가 아닌 부분적으로도 같은 처리를 할 수 있습니다.