Javascript 防止iScroll滚动列表视图筛选器

我正在尝试使用将iScroll集成到我的应用程序中。我想用它来滚动某个页面的listview组件。我希望这个listview的过滤器在标题之后保持固定，只滚动listview项

顺便说一句，我尝试通过编程将筛选器窗体移动到标有

id=“scroller”

（以避免滚动）的div之前，如下所示：

$('#testPage').live('pageinit', function() {
    $('form.ui-listview-filter').insertBefore($('div.scroller'));
});

<div id="testPage" data-role="page" data-iscroll="enable">
    <div data-role="header" data-position="inline">
    <h1>Test</h1>
    </div>
    <div data-role="content" data-iscroll="scroller">
      <div id="scroller">
      <ul data-role="listview" data-filter="true">
            <li><h3>Test1</h3></li>
            <li><h3>Test2</h3></li>
            <li><h3>Test3</h3></li>
            ...
            <li><h3>Test60</h3></li>
        </ul>         
     </div> 
</div>

但是，表单不会移动并停留在可滚动区域中。有人知道是否可以移动它，或者是否有其他方法可以防止过滤器滚动

我的html代码如下所示：

$('#testPage').live('pageinit', function() {
    $('form.ui-listview-filter').insertBefore($('div.scroller'));
});

<div id="testPage" data-role="page" data-iscroll="enable">
    <div data-role="header" data-position="inline">
    <h1>Test</h1>
    </div>
    <div data-role="content" data-iscroll="scroller">
      <div id="scroller">
      <ul data-role="listview" data-filter="true">
            <li><h3>Test1</h3></li>
            <li><h3>Test2</h3></li>
            <li><h3>Test3</h3></li>
            ...
            <li><h3>Test60</h3></li>
        </ul>         
     </div> 
</div>

试验

测试1
测试2
测试3
...
测试60

完整示例如下：

---

提前感谢您的帮助

我最终解决了这个问题，将过滤器移到

div

之前，使用

data role=“content”

像这样

$（'.ui content'）。移到（$（'form.ui listview filter'））之前

最后的代码以防有人感兴趣。
嘿，伙计，你找到解决方案了吗？我面临着同样的问题，我已经用最后的代码为这个问题添加了答案。