iScroll을 이용하여, 특정 영역만 스크롤이 가능하게 해보자.

iScroll을 이용하여, 특정 영역만 스크롤이 가능하게 해보자.
참고 : http://cubiq.org/iscroll
예를 들어 아래와 같은 jquery mobile을 이용하여, 만든 webapp을 구현했다고 치자.
.
.

<div data-role="page" id="page_default" data-theme="e">
.
.

<div data-role="content">

<div id="collapser" data-role="collapsible" data-collapsed="true">

<h3>검색어 입력</h3>

<input  id="enteredItemField" type="search" value="" placeholder="검색어를 입력하세요."</input>

<div data-role="controlgroup" data-type="horizontal" align="center">

<a id="enteredItemSaveButton"href="#" data-icon="star" data-role="button">검색어 저장</a>

<a id="directSearchButton"href="#" data-icon="search" data-role="button">바로 검색</a>

</div>

</div>

<ul id="ItemList" data-role="listview">

<!-- 여기에 동적으로 li가 붙는다. -->

</ul>

</div>

<!-- CONTENT END -->

</div>
.
.
1. 특정 영역만을 scroll가능도록 하기 위해서 일단 이 페이지 (#page_default) 의 스크롤링을 prevent하자.
$("#page_default").live('touchmove', function (e) { e.preventDefault(); }, false); 
2. iscroll.js를 페이지에 import하자.
<script src="./lib/iscroll.js"></script>
3. scrolling되었으면 하는 영역을 래핑하자.

<div id="wrapper">
    <div id="scroller">
        <ul id="itemList" data-role="listview">
            <li>...</li>
        </ul>
    </div>
</div>

4. wrapper를 위한 css를 내 어플에 맞게 customize하자.

#wrapper {
    position:relative;
    z-index:1;
    width:100%;
    height:350px;
    overflow:auto;
}

5. iscroll 객체를 listview dom id와 함께 인스턴싱하자.
myScvar roll = new iScroll('scroller');
결과 >> 리스트 부분만 스크롤링 된다. 

이 모든 내용은 
http://cubiq.org/iscroll 에 돔 더 자세히 잘 나와 있으니, 참고도록 하자.