주메뉴 바로가기 견적문의 바로가기 주내용 바로가기
Blue Red Orange Green Grey
Mobile/HTML5
iScroll을 사용해서 모바일웹에서 내부 스크롤 영역 만들기
입력 2013.03.27 오전 11:39 | 조회 1,845
x-mind
모바일 브라우저들은 데스크탑 브라우저와 달리 몇몇 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가 컨테이너의 첫 번째 자식 엘리먼트가 되도록 했습니다.
Security number

click to select icon

  • Very Happy
  • Smile
  • Sad
  • Surprised
  • Shocked
  • Confused
  • Cool
  • Laughing
  • Mad
  • Razz
  • Embarassed
  • Crying or Very sad
  • Evil or Very Mad
  • Twisted Evil
  • Rolling Eyes
  • Wink
  • Exclamation
  • Question
  • Idea
  • Arrow
  • Sux
  • Good
  • Very Angry
  • Attention


목록수정삭제인쇄0


Board List
No.제목글쓴이조회등록일
실무에서 많이 쓰는 위주로 순서없이 그때 그때 포스트합니다.x-mind6372015.04.02
HTML5강좌 링크x-mind1,7812012.02.28
23네이버 웹마스터 도구로 사이트 검색엔진에 추가x-mind2652016.04.26
22[HTML5] 안드로이드 및 아이폰에서 input file 사용시 카메라 호...x-mind8532016.04.22
21유투브 동영상을 배경으로x-mind3742016.03.30
20Canvas - 파일로 저장x-mind4992015.09.08
19모바일웹 카카오링크 연동(단순텍스트 링크 보내기)x-mind1,0462015.06.11
18[링크]나의 웹사이트에 Facebook 계정으로 로그인 하기x-mind9152015.01.22
17[HTML5] 위치정보 사용하기x-mind1,0482014.10.27
16모바일 브라우저 테스트 도구x-mind1,3922014.03.20
15Safari 브라우저 모바일 모드x-mind1,5192014.03.20
14iScroll을 사용해서 모바일웹에서 내부 스크롤 영역 만들기x-mind1,8452013.03.27
13터치 이벤트를 이용한 사용자 제스처 분석x-mind2,8842013.03.26
12모바일 웹 스크롤 페이징x-mind7,8292013.03.26
11웹표준, 웹접근성을 고려한 HTML 코딩 작업시 규칙.x-mind3,5432013.01.24
10Google Chart Api 이용 QR 코드 생성x-mind1,3582013.01.24
9웹표준 코딩시 주의할점x-mind2,7392012.07.26
8tabindex 속성이 오히려 접근성을 해친다.x-mind2,1672012.04.11
7아이폰, 안드로이드 바탕화면에 바로가기 만들기 4x-mind9,6292012.03.27
6이전버전에서의 HTML5요소 사용x-mind1,0212012.03.02
5HTML5 API 강좌 #1 – Web Storage 와 Application Cachex-mind1,2502012.02.28
4화면 사이즈에 맞게 이미지 확대x-mind4,1942012.01.27
Copyrightⓒ x-mind.co.kr All rights reserved. 1