LeonKim

<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>

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

roll = new iScroll('scroller'); 


결과 >> 리스트 부분만 스크롤링 된다. 

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