스크롤바가 숨겨진 상태에서 스크롤되는 웹 페이지 만들기

웹 페이지를 만들 때 스크롤이 가능하게 하면서도 스크롤바를 숨겨야 할 경우가 있습니다. 모바일 기기에서는 스크롤바가 평소에는 보이지 않다가 스크롤 중에 희미하게 보이지만 데스크톱에서는 오른쪽에 자리를 차지하고 있는데, 이 때 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

이 포스트에서 설명한 방법은 웹 페이지 전체를 스크롤바 없이 스크롤하는 방법에 적용되지만, 같은 방법으로 웹 페이지 전체가 아닌 부분적으로도 같은 처리를 할 수 있습니다.

답글 남기기

이메일 주소는 공개되지 않습니다.