JQuery Mobile Scrolling在iOS上不流畅
Posted
技术标签:
【中文标题】JQuery Mobile Scrolling在iOS上不流畅【英文标题】：JQuery Mobile Scrolling not smooth on iOS 【发布时间】：2014-02-07 12:35:49 【问题描述】：我有一个用 JQuery 1.4 编写的多页应用程序，显示在 ios WebView 中。它使用静态标题，内容有 20 个左右带有嵌入图像和文本的 div。我没有使用 PhoneGap。
在 Safari 的 WebView 和中，我可以垂直滚动浏览内容，但我没有在 iOS 应用程序中获得相同的流畅度（即滚动会持续一段时间手指抬起后=“平滑”滚动）。当我的手指离开屏幕时，滚动就会停止。
在 JQuery Mobile 中平滑滚动内容时是否存在我不知道的设置或问题？
【问题讨论】：
【参考方案1】：我认为这与您不再滚动 <body> 元素，而是滚动 JQuery 移动页面 <div> 的事实有关。如果您在没有 JQuery Mobile 的情况下使 <div> 可滚动，您应该能够复制这种断断续续的体验。
您要查找的内容实际上称为动量滚动，有时也称为惯性滚动。
据推测，您应该能够将 css 属性 -webkit-overflow-scrolling: touch; 添加到要添加动量滚动的 div 中，它应该可以工作，但我无法在页面 <div> 上使用它。我确实尝试将它添加到正文中，并且能够获得正确的滚动，但是当我滚动时，我的固定标题开始跳来跳去。
如果您没有固定的标题，请随意尝试一下。
body
-webkit-overflow-scrolling: touch;
【讨论】：
所以在我的例子中，我有其他人在开发这个应用程序，他们设置了一个糟糕的 CSS 规则，导致了这种糟糕的体验。我通过删除除 JQuery Mobile CSS 之外的所有 CSS 来发现这一点。然后我慢慢地添加了自定义 CSS 的其余部分，直到找到错误的规则。这很令人沮丧，但这是多人在同一个项目上工作的结果。起初我认为它是 JQuery Mobile 的原因是因为我也尝试过删除 JQuery Mobile 并且应用程序在没有它的情况下运行良好。所以我猜这两条规则是相互竞争的。 冠军！这很有帮助。 对我来说也有帮助。谢谢你，斯科特！您能否再告诉我们，您在项目中认定的“不良规则”是什么？ 是的，他在css中添加了这个没有用：html overflow-y: scroll; 我删除后，问题解决了。
这对我有用。 .wrapper -webkit-overflow-scrolling: touch; overflow-y: scroll; 【参考方案2】：
对我们来说，问题出在 jQuery Mobile 的 CSS 中，我们这样修复它：
.ui-mobile .ui-page-activedisplay:block;overflow:visible;/*overflow-x:hidden*/
为我们修复了滚动错误。
overflow-x: hidden 搞砸了。
【讨论】：
大家有这个问题，先试试这个！ 有同样的问题，但提供的解决方案不起作用。一旦我必须为可滚动的 DIV 设置高度，滚动就不再起作用（抖动）。 在 2020 年感谢您！它解决了我的垂直滚动问题，尽管我必须添加 overflow-x:unset;【参考方案3】：也许问题在于绘制这些图像/div 需要大量的处理能力。你压缩文件了吗？
您可以在这里阅读更多信息：
图像压缩 http://www.html5rocks.com/en/tutorials/speed/img-compression/ **滚动到底部查看您可以使用的应用的链接
CSS 绘制时间导致问题 http://www.html5rocks.com/en/tutorials/speed/css-paint-times/ **请务必点击底部的“Continuous Paint Times”链接以查看如何配置绘制时间。
希望这会有所帮助！
【讨论】：
谢谢，也许这就是问题所在，但只要我的手指向下滚动，滚动实际上就可以正常工作 - 没有抖动或任何东西。问题出在滑动之后 - 滚动只是停止并且不跟随滑动的动量（就像大多数原生滚动视图一样）。【参考方案4】：您可以尝试使用 Dave Taylor 的 jquery 动力学库向容器添加一些滚动活动： http://davetayls.me/jquery.kinetic/
【讨论】：
【参考方案5】：您可能可以使用适用于许多平台的 nicescroll 插件。
安装：
<script src="jquery.nicescroll.js"></script>
用法：
$(document).ready(
function()
$("html").niceScroll();
);
这是nicescroll plugin的参考
【讨论】：
以上是关于JQuery Mobile Scrolling在iOS上不流畅的主要内容，如果未能解决你的问题，请参考以下文章
JQuery Mobile：选择菜单刷新 true 在 iOS 上不起作用
javascript jQuery Smooth Scrolling
jQuery mobile - phonegap - iPhone - 实用程序