JQuery Mobile Scrolling在iOS上不流畅答案

【问题标题】：JQuery Mobile Scrolling not smooth on iOSJQuery Mobile Scrolling在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-active{display:block;overflow:visible;/*overflow-x:hidden*/}

为我们修复了滚动错误。

overflow-x: hidden 搞砸了。

【讨论】：

【解决方案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();

  }

);

【讨论】：