jQuery 移动滚动视图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7254761/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Mobile Scrollview
提问by Rufix
So I'm trying to make a scrollable list:
所以我正在尝试制作一个可滚动列表：
<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>
enclosed in: <.section class="ex_list" style="float: right; width:70%;overflow:hidden"> tag
包含在：<.section class="ex_list" style="float: right; width:70%;overflow:hidden"> 标签
I use following scripts:
我使用以下脚本：
http://jquerymobile.com/test/experiments/scrollview/jquery.mobile.scrollview.js
http://jquerymobile.com/test/experiments/scrollview/jquery.mobile.scrollview.js
http://jquerymobile.com/test/experiments/scrollview/scrollview.js
http://jquerymobile.com/test/experiments/scrollview/scrollview.js
In addition to jqm and jq. Problem is that on PC scrolling doesn't work (yet it's not so bad), but on iPad whole site is being scrolled in addition to listview. User can also scroll OVER the site and see gray bg, until safari stops scrolling.
除了jqm和jq。问题是在 PC 上滚动不起作用（但还不错），但在 iPad 上，除了列表视图之外，整个站点都在滚动。用户还可以滚动网站并看到灰色背景，直到 safari 停止滚动。
EDIT: In addition these 2 JS's make 'toggleClass()' jQuery function not work.
编辑：此外，这两个 JS 使 'toggleClass()' jQuery 函数不起作用。
回答by CoatedMoose
I just finished implementing this on android(2.2 and 3.2) and on iphone (not ipad) for scrollview to work properly, you need to include the cssfile, and the jquery easingscript.
我刚刚在 android（2.2 和 3.2）和 iphone（不是 ipad）上实现了这个，以便滚动视图正常工作，你需要包含css文件和jquery 缓动脚本。
Scripts must be included in this order:
脚本必须按以下顺序包含：
- jquery
- jquery.mobile
- jquery.easing
- jquery.mobile.scrollview
- scrollview
- 查询
- jquery.mobile
- jquery.easing
- jquery.mobile.scrollview
- 滚动视图
The css file gives you the scroll bars, jquery.easinggives the smooth animation (an impressive project by itself), jquery.mobile.scrollview does the heavy lifting, scrollview scrapes the page and adds enough markup for the scrollview to take over.
css 文件为您提供滚动条，jquery.easing提供流畅的动画（本身就是一个令人印象深刻的项目），jquery.mobile.scrollview 完成繁重的工作，scrollview 抓取页面并添加足够的标记让 scrollview 接管。
I am sure I don't need to tell you that it's is 'Experimental' for a reason (bizarre behaviour while scrolling through a listview, it also breaks the ability to click on buttons and in text areas on chromium-browser - I haven't tested other browsers), however I have found very few problems with it on mobile devices. I really like that it enables me to keep the tabs at the top of the page all the time. Nesting many scrollviews is pretty cool as well.
我确定我不需要告诉你它是“实验性的”是有原因的（滚动列表视图时的奇怪行为，它还破坏了点击按钮和铬浏览器文本区域的能力 - 我没有” t 测试了其他浏览器），但是我在移动设备上发现它的问题很少。我真的很喜欢它使我能够始终将标签保留在页面顶部。嵌套许多滚动视图也很酷。
I can't say that I have noticed any problems with toggleClass function, however that might have something to do with scrollview going through and adding markup.
我不能说我已经注意到 toggleClass 函数的任何问题，但这可能与滚动视图通过并添加标记有关。
NOTE: As of the most recent version of jQuery mobile rc2, the buttons and text inputs should work.
注意：从最新版本的 jQuery mobile rc2 开始，按钮和文本输入应该可以工作。
EDIT
编辑
As of jQuery Mobile 1.1.0, it is recommendedto use the fixed headersusing the data-position="fixed"attribute in the header (or footer) and completely remove scrollview.
从 jQuery Mobile 1.1.0 开始，建议使用使用页眉（或页脚）中的属性的固定页眉data-position="fixed"并完全删除滚动视图。
I have tried this myself and it works much better (for Android 2.2+ and iOS5 - BlackBerry OS not tested by me, but the blog claims it should work for BB7). It runs faster and smoother than the js solution and has fewer graphical bugs. Be sure to remove all the extra js, css and all references to data-scrollas it interferes/breaks everything.
我自己试过这个，效果更好（对于 Android 2.2+ 和 iOS5 - 黑莓操作系统没有经过我的测试，但博客声称它应该适用于 BB7）。它比 js 解决方案运行得更快更流畅，并且图形错误更少。一定要删除所有额外的 js、css 和所有引用，data-scroll因为它会干扰/破坏一切。
For unsupported versions and OS's you might still need the scrollview js/css etc, but in my experience the places that don't support the fixed headers were too slow to run the js version anyway.
对于不受支持的版本和操作系统，您可能仍然需要滚动视图 js/css 等，但根据我的经验，不支持固定标头的地方太慢而无法运行 js 版本。
回答by Nader
Nice thread here, like to contribute a small note:
不错的帖子在这里，想贡献一个小笔记：
If you like the grey areas in Safari to disappear in jQuery mobile pages when scrolled, you can use:
如果您希望 Safari 中的灰色区域在滚动时在 jQuery 移动页面中消失，您可以使用：
document.ontouchmove = function(e){
e.preventDefault();
}
Also more importantly, this will enable you to work with offline databases more efficiently, because normally the UI (touchmove event) interrupts SqlLite DB functions on mobile devices, this way interruption is avoided.
更重要的是，这将使您能够更有效地使用离线数据库，因为通常 UI（touchmove 事件）会中断移动设备上的 SqlLite DB 功能，这样可以避免中断。
