iScroll을 사용해서 모바일웹에서 내부 스크롤 영역 만들기
모바일 브라우저들은 데스크탑 브라우저와 달리 몇몇 CSS 속성을 막아놓고 있습니다. 모바일 기기의 특성상, 해당 속성이 사용되서는 곤란하기 때문인데요 예를 들어, fixed positioning을 허용하지 않고 있습니다. 만약 매우 큰 엘리먼트가 position:fixed; 로 설정되어 있다면 작은 화면을 가진 기기에서는 웹페이지에서 그 엘리먼트 이외의 내용은 볼 수 없을 것이기 때문입니다.
그리고 또 한가지 막혀있는 기능이 overflow:scroll; 속성입니다. 데스크탑 브라우저에서는 이 속성을 사용해서 아래의 데모와 같이 필요한 경우 내부 스크롤을 만들어서 사용할 수 있습니다.
데스크탑 브라우저에서는 마우스로 스크롤 해서 컨테이너 안에 있는 내용을 모두 볼 수 있지만 스마트폰에서 위 데모에 접속해 보시면 스크롤이 안되는 것을 보실 수 있습니다. 작은 화면을 가진 스마트폰에서는 overflow:scroll; 속성으로 인해 웹페이지를 모두 탐색하지 못하는 경우가 있기 때문에 기능을 막아놓았다고 하는데요, http://css-tricks.com/13246-mobile-webkit-overflow-scrolling/ 여기를 보시면 iOS 5 Beta 2 의 브라우저에서는
-webkit-overflow-scrolling: touch;
위와 같은 속성을 추가하는 것으로 문제를 해결할 수 있다고 합니다. 저는 안드로이드폰을 사용하고 있기 때문에 테스트해보진 못했습니다. 어쨌든 현재 대부분의 폰에서는 overflow:scroll; 을 사용한 내부 스크롤은 사용할 수 없는 상태입니다.
iScroll (http://cubiq.org/iscroll-4) 을 사용하면 이러한 문제를 해결하고 내부 스크롤이 가능한 모바일용 웹페이지를 개발할 수 있습니다. 다양한 데모와 사용방법은 iScroll의 공식 홈페이지에 자세한 설명이 나와 있으니, 저는 위에 있는 데스크탑 브라우저에서만 내부 스크롤이 가능했던 데모에 iScroll을 적용한 데모를 보여드리겠습니다.
두 데모에서 html 마크업 바뀐 부분
- iScroll을 생성할 때 id를 사용하기 때문에 각각의 컨테이너에 iscroll1, iscroll2 이라는 id를 줬습니다.
- 컨테이너의 첫 번째 자식 엘리먼트만 iScroll 되는 대상이 됩니다. 그래서 p 엘리먼트들을 div 하나로 감싸서 이 div가 컨테이너의 첫 번째 자식 엘리먼트가 되도록 했습니다.
Pingback: iscroll - @html coder()