웹 페이지를 만들 때 스크롤이 가능하게 하면서도 스크롤바를 숨겨야 할 경우가 있습니다. 모바일 기기에서는 스크롤바가 평소에는 보이지 않다가 스크롤 중에 희미하게 보이지만 데스크톱에서는 오른쪽에 자리를 차지하고 있는데, 이 때 overflow: hidden;으로 CSS를 지정하면 스크롤바는 숨겨지지만 스크롤이 되지 않습니다. 다만, 모종의 방법을 사용하면 스크롤바가 숨겨진 상태에서도 스크롤이 가능하게 구현할 수 있습니다.
스크롤바를 숨기고 웹 페이지를 스크롤할 수 있게 하는 방법은 몇 가지가 있는데,
1. <div> 태그를 이용하는 방법
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <!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를 이용하는 방법
1 2 3 | body::-webkit-scrollbar { display: none; } |
이 CSS 코드는 body 요소의 스크롤바를 숨기는 코드입니다. 이 방법은 앞의 방법과는 달리 <div> 태그를 겹치고 자바스크립트를 넣어야 하는 번거로움이 없다는 장점이 있습니다. 다만, 비표준 코드이고 구글 크롬 등 웹키트 엔진을 내장한 브라우저에서만 적용된다는 단점이 있습니다.
1번 방법을 사용한 예: https://pjw48.net/samp/hidden_scrollbar_sample.html
이 포스트에서 설명한 방법은 웹 페이지 전체를 스크롤바 없이 스크롤하는 방법에 적용되지만, 같은 방법으로 웹 페이지 전체가 아닌 부분적으로도 같은 처리를 할 수 있습니다.