그러다 보니 PC 에서 사용하는 일반적인 웹들도 모바일 페이지를 모사하려는 경향이 있다.
뭐... 모바일 페이지가 좀 세련되어 보이긴 한다...
그 중 하나가 스크롤바.
일반적인 스크롤 바는 이런 형태.
마우스로 클릭하기 편하게 하기 위해 좀 큼지막 하다.
하지만 모바일 페이지에서 스크롤바는 대부분 좀더 가늘다.
(터치로 스크롤하니 사실 거의 필요가 없으니...)
모바일에선 이렇게...
사용성면에선 두꺼운게 좋지만, 미관상으론 얇은게 보기 좋다.
이것을 Pc 에서도 쉽게 구현하게 해주는 "perfect-scrollbar" 이 있다.
파일은 해당 사이트의 하단에 보면 다운로드 버튼이 있다.
이것도 오픈소스라, 다운로드 버튼을 클릭하면 "GitHub" 로 이동하는데, 거기서 원하는 버젼을 다운 받으면 된다.
어차피 CSS 와 Javascript 라서 아무데나 원하는 곳에 압축을 풀고 경로만 지정하면 쓸수 있다.
원래는 jQuery 없이도 동작하지만, 요즘은 워낙 jQuery 를 많이 쓰니 그냥 쓴다고 셈치고 작업한다. (jQuery 없이 사용하는 소스를 배포 사이트에서 샘플을 보면 된다.)
보다시피 사용은 간단하다.
그냥 스타일시트와 자바스크립트를 링크하고, 스크롤바를 적용할 오브젝트를 지정하기만 하면 끝.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>perfect-scrollbar</TITLE>
<LINK href="./perfect-scrollbar/css/perfect-scrollbar.min.css" rel="stylesheet">
<STYLE>
#Demo {
position:relative; margin:0px auto;
padding:0px;
width: 600px; height: 400px;
overflow: hidden;
}
</STYLE>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="./perfect-scrollbar/js/perfect-scrollbar.js"></script>
<SCRIPT>
$(function() {
Ps.initialize(document.getElementById('Demo'));
});
</SCRIPT>
</HEAD>
<BODY>
<div class="description">
<div id="Demo">
<img src="Koala.jpg">
</div>
</div>
</BODY>
</HTML>
이렇게 하면...
그냥 볼때는 아무런 스크롤바가 나타나지 않지만... 마우스를 스크롤바 위치에 올려 놓으면...
이렇게 가느다란 스크롤바가 나타난다.
