Question

所以我试图制作一个可滚动的列表：

<div data-role="content-primary" class="list" style="height:100%; overflow:scroll" data-scroll="y">
    <ul data-role="listview" id="mainList" >
        <asp:Repeater ID="expList" runat="server" OnItemDataBound="expList_ItemDataBound" ClientIDMode="Static">
            <ItemTemplate>
                <li class="opener" runat="server" id="lItem" style="border-top: 1px solid rgb(200,200,200)">
                    <div id="divPic" runat="server" class="pic">
                        <h2><asp:Literal runat="server" ID="litName"></asp:Literal></h2>
                        <p><asp:Literal runat="server" ID="litDesc"></asp:Literal></p>
                        <input type="hidden" Id="brand" runat="server"/>
                        <input type="hidden" Id="cat" runat="server"/>
                    </div>
                </li>
            </ItemTemplate>
        </asp:Repeater>
    </ul>
</div>

括在：＆lt; .section class =“ex_list”style =“float：right; width：70％; overflow：hidden”＆gt;标签

我使用以下脚本：

http://jquerymobile.com/test/experiments/scrollview/jquery.mobile.scrollview.js

http://jquerymobile.com/test/experiments/scrollview/scrollview.js

除了jqm和jq。问题是在PC上滚动不起作用（但它不是那么糟糕），但在iPad上整个网站除了列表视图之外还在滚动。用户还可以在站点上滚动并查看灰色bg，直到safari停止滚动。

编辑：另外这两个JS使'toggleClass（）'jQuery函数不起作用。

Answer 1

我刚刚在android（2.2和3.2）和iphone（不是ipad）上实现了这个以使scrollview正常工作，你需要包含css文件和jquery easing脚本。 / p>

脚本必须包含在此顺序中：

jquery的
jquery.mobile
jquery.easing
jquery.mobile.scrollview
滚动视图

css文件为您提供滚动条，jquery.easing提供流畅的动画（一个令人印象深刻的项目），jquery.mobile.scrollview完成繁重的工作，scrollview刮擦页面并为scrollview添加足够的标记接管。

我确信我不需要告诉你它是'实验'的原因（滚动浏览列表视图时的奇怪行为，它也打破了点击按钮和铬浏览器文本区域的能力 - 我还没有测试过其他浏览器），但我发现它在移动设备上遇到的问题很少。我真的很喜欢它使我能够始终将标签保持在页面顶部。嵌套许多滚动视图也非常酷。

我不能说我注意到了toggleClass函数的任何问题，但这可能与使用scrollview并添加标记有关。

注意：从最新版本的jQuery mobile rc2开始，按钮和文本输入应该可以正常工作。

修改

从jQuery Mobile 1.1.0开始，recommended使用标题（或页脚）中data-position="fixed"属性的fixed headers并完全删除scrollview。

我自己尝试了这个并且效果更好（对于Android 2.2+和iOS5 - 未经我测试的BlackBerry OS，但博客声称它应该适用于BB7）。它比js解决方案运行得更快，更流畅，并且图形错误更少。请务必删除所有额外的js，css和data-scroll的所有引用，因为它会干扰/破坏所有内容。

对于不受支持的版本和操作系统，您可能仍需要scrollview js / css等，但根据我的经验，不支持固定标题的地方太慢而无法运行js版本。

Answer 2

这里的好帖子，喜欢提供一个小小的说明：

如果您希望Safari中的灰色区域在滚动时在jQuery移动页面中消失，您可以使用：

document.ontouchmove = function(e){
    e.preventDefault();
}

更重要的是，这将使您能够更有效地使用脱机数据库，因为通常UI（touchmove事件）会中断移动设备上的SqlLite数据库功能，从而避免中断。

jQuery Mobile Scrollview

2 个答案: