jQuery Mobile Scrollview

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

括在:标签

我使用以下脚本:

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

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

除了jqm和jq。 问题是在PC上滚动不起作用(但它并没有那么糟糕),但是在整个网站上除了listview之外还在滚动。 用户还可以在站点上滚动并查看灰色bg,直到safari停止滚动。

编辑:另外这两个JS使’toggleClass()’jQuery函数不起作用。

我刚刚在android(2.2和3.2)和iphone(不是ipad)上完成了这个以使scrollview正常工作,你需要包含css文件和jquery缓动脚本。

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

  1. jQuery的
  2. jquery.mobile
  3. jquery.easing
  4. jquery.mobile.scrollview
  5. 滚动视图

css文件为您提供了滚动条, jquery.easing提供了流畅的动画(一个令人印象深刻的项目),jquery.mobile.scrollview完成繁重的工作,scrollview抓取页面并为scrollview添加足够的标记来接管。

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

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

注意:从jQuery mobile rc2的最新版本开始,按钮和文本输入应该有效。

编辑

从jQuery Mobile 1.1.0开始, 建议在标题(或页脚)中使用data-position="fixed"属性来data-position="fixed"标题,并完全删除scrollview。

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

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

好的post在这里,喜欢贡献一个小笔记:

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

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

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