iScroll을 사용해서 모바일웹에서 내부 스크롤 영역 만들기

codefactory 2011/08/15 Mobile Web 18

모바일 브라우저들은 데스크탑 브라우저와 달리 몇몇 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가 컨테이너의 첫 번째 자식 엘리먼트가 되도록 했습니다.

 

By codefactory
  • http://www.google.com/ Eliza

    Phenomenal breakdown of the topic, you suhold write for me too!

  • Areum

    도움이 많이 됐습니다 감사해요

    • codefactory

      아 네, 감사합니다..^^

  • Pingback: iscroll - @html coder()

  • JSeo Dankrevew

    좋은 정보 감사합니다!

    • codefactory

      감사합니다..^^

  • 슈퍼장

    노트1원인데 첫번째 데모 작동이 안되야 정상아닌가요? 스크롤 잘 되네요? 브라우저마다 다른걸까요?ㅜ

    • codefactory

      안녕하세요
      아 네, 지금은 되시는게 맡습니다. 제 폰도 갤럭시 S3인데 잘 됩니다.

      예전에는 2011년 8월 작성된 본문 내용처럼 모바일 브라우저에서는 overflow:scroll; 작동하지 않았습니다. 그래서 iScroll 같은 라이브러리가 필요했었습니다.

      그런데 정확한 시기는 기억이 안나는데 어느 시점에서부터인가 모바일 브라우저 들도 overflow:scroll;을 지원하기 시작했습니다. 그래서 말씀하신 것처럼 스크롤이 잘 되고 있습니다.

      그런 면에서 iScroll 같은 라이브러리의 필요성이 바운스 효과 등을 제외하고는 많이 줄어든 것 같습니다.

      • 슈퍼장

        이후의 디바이스의 브라우더 에서만 개선? 된건지 기존 디바이스의 브라우저에서 개선 된건지 알 수 있을까요? 테스트해 볼 디바이스가 없어서 여쭤봅니다.

        • codefactory

          아 네, 안드로이드의 경우 3.0 부터는 overflow:scroll 이 지원되고 있습니다.
          http://barrow.io/overflow-scrolling

          위 URL에서 본 내용인데요
          그래서 3.0 이상 버전을 사용하는 디바이스의 경우에는 잘작동하고 2점대 버전일 경우에는 안될 것으로 생각됩니다.

          그런데 아이폰의 경우에는 제가 지금 테스트할 아이폰이 없어서 테스트를 못해봤습니다. 그리고 위 URL에 iOS얘기가 나오는데 제가 영어가 잘 해석이 안되서요

  • Parksungsu

    안녕하세요. 궁금 한게 있어서 문의 드립니다. iscroll 에 대해서 잘 알고 싶다면 어디에다가 문의 하는 것이 좋을 까요. 영어라도 상관 없습니다. 현재 키보드 이벤트를 받아서 iscroll 을 움직이게 하려고 하는데 정보가 없네요. 이것에 대해 아는 사항 있다면 답변을 달아 주시거나 제메일에 답변 주시면 감사하겠습니다.

    • codefactory

      안녕하세요

      iscroll 에 대해서 가장 잘 소개가 되어 있는 곳은 iscroll 웹사이트인 http://cubiq.org/iscroll-4 이겠지만

      구현하시는 기능이 키보드 이벤트에 따라 iscroll 을 움직이게 하시는 것이시라면, 이건 iscroll 기본 기능은 아니고 응용된 기능이니

      구현하시려는 기능을 그대로 (영어로) 구글에서 검색하시는 것이 제일 나으실 것 같습니다.

      감사합니다..^^

      • Parksungsu

        얘기 하신데로 이미 검색을 해보았지만, 키보드 업,다운 이벤트에 대한 글들은 찾을 수가 없었습니다. 그래서 여기 글을 남긴 것이구요. 그래도 답변 감사합니다.

        • codefactory

          안녕하세요

          아 네, 저도 다시 한번 찾아보았습니다. 그런데 키보드 업, 다운 이벤트에 관한 예제는 따로 나오지 않았는데 scrollTo 라는 iScroll 메서드를 찾았습니다.

          이 메서드는 iScroll 을 프로그램으로 스크롤 시킬 수 있게 해주는 메서드입니다. (손가락이나 마우스 휠로 스크롤을 안해도 되는 것이지요)

          이 메서드를 사용해서 키보의 화살표 키를 클릭하면 iScroll 이 움직이게 하는 예제를 http://codefactory.kr/demos/iScroll/iscroll-4/examples/simple/ 에 만들어서 올려놓았습니다. 워낙 급하게 만든 것이라 좀 별로지만, 제가 한글로 주석달아 놓은 부분을 보면 원하시는 작업을 하시는데 참고가 되실 수도 있을 것 같습니다.

          감사합니다.

  • Hyeok.soo Sohn

    안녕하세요. 예제를 보다가 궁금한게 있어서 질문드립니다.
    마지막 p는 스크롤 끝나면 안보이는데 버그인가요? 아니면 뭔가 빠진건지…
    iscroll 사용할 때마다 그런거 같아서 질문남깁니다.

    • codefactory

      안녕하세요
      아 네, 그 부분은 저도 iScroll 을 사용할 때마다 거의 그랬던 것 같습니다. 그런데 왠지 iScroll 의 버그 인것 같지는 않고, 제가 사용법을 잘 모른채로 사용하는 것은 아닐까라고 생각만하고 자세히 알아보지는 않고 있는 부분이었는데요

      그런데 제가 예제를 그것을 해결하지 않은 상태로 올려놓았었네요, 죄송합니다.
      저 같은 경우에는 스크롤되는 엘리먼트에 padding-bottom 값을 주는 방식으로 해결을 하고 있습니다. 지금 예제의 소스코드를 수정해서 올려놓았습니다.

      예제에 있는 첫 번째 데모는 방금 말씀드린 것처럼 padding-bottom 값을 주는 방법을 사용했고, 두 번째 데모는 마지막 p 의 다음에 을 추가하는 방법을 사용했습니다.

      감사합니다.

      • Hyeok.soo Sohn

        빠른 답변 감사합니다.!
        우선 iscroll 을 빼기로 했는데 제시해주신 해결책을 바탕으로
        저도 연구해 보겠습니다^^

        좋은 하루 보내세요!

        • codefactory

          아 네, 감사합니다..^^