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가 컨테이너의 첫 번째 자식 엘리먼트가 되도록 했습니다.

 

  • 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

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