iOS上的JQuery Mobile滚动不畅通

问题描述：

我有一个用JQuery 1.4编写的多页面应用程序，显示在iOS WebView中。它使用一个静态头，内容有20个左右的div，嵌入图像和文本。我没有使用PhoneGap。iOS上的JQuery Mobile滚动不畅通

在Safari中的WebView 和中，我可以垂直滚动浏览内容，但我没有获得与iOS应用程序相同的平滑度（即在手指弹出后滚动持续了一会儿=“平滑”滚动）。当我的手指离开屏幕时，滚动停止。

是否有一个设置或问题我不知道什么时候能够顺利滚动JQuery Mobile中的内容？

答

也许问题在于它需要大量的处理能力来绘制这些图像/ div。你压缩了你的文件吗？

你可以在这里阅读更多：

图像压缩 http://www.html5rocks.com/en/tutorials/speed/img-compression/ **滚动到底部的应用程式的连结则可以使用

CSS漆时报导致问题 http://www.html5rocks.com/en/tutorials/speed/css-paint-times/ **请务必点击底部的“连续涂料时间”链接，了解如何绘制涂料时间。

希望这会有所帮助！

感谢，也许这就是问题所在，但就好了，只要我的手指上下滚动实际工作 - 没有抖动或任何东西。问题是刷卡后 - 滚动只是停止和不遵循刷卡的势头（像它对于大多数本土滚动视图）。 – dixkin

答

你可以尝试使用戴维·泰勒的jQuery的动态库来添加一些滚动活动容器： http://davetayls.me/jquery.kinetic/

答

我认为这与事实，你不再滚动<body>元素做，而是JQuery Mobile页面<div>。如果您在没有JQuery Mobile的情况下滚动<div>，则应该可以复制这种不连贯的体验。

你在找什么实际上是所谓势头滚动，有时也被称为惯性滚动。

假设你应该可以将css属性-webkit-overflow-scrolling: touch;添加到你想添加动量滚动的div并且它应该可以工作，但是我一直没有能够得到这个工作在Page <div>上。我确实尝试将它添加到body中，并且我能够正确地滚动，但是当我滚动时，我的固定标题开始跳动。

如果您没有固定的标题，请随时尝试一下。

body { 
    -webkit-overflow-scrolling: touch;  
}

所以在我的情况下，我有其他人在应用程序上工作，他们把一个糟糕的CSS规则，导致这种不好的经历。我通过剥离除JQuery Mobile CSS之外的所有CSS来发现此问题。然后我慢慢地添加了自定义CSS的其余部分，直到找到坏规则。这非常令人沮丧，但是由于多个人在同一个项目上工作的结果。我之所以首先认为它是JQuery Mobile，是因为我也尝试删除JQuery Mobile，没有它，应用程序运行良好。所以我猜这两条规则是竞争的。 –

冠军！这帮助了很多。 –

对我来说也有帮助。谢谢你斯科特！你能另外告诉我们，你在你的项目中被认定为“坏规则”吗？ – marcel

答

您可以使用nicescroll插件，它可以在许多平台上使用。

安装：

<script src="jquery.nicescroll.js"></script>

用法：

$(document).ready(

    function() { 

    $("html").niceScroll(); 

    } 

);

这里是nicescroll plugin

答

对我们的参考，这个问题是jQuery Mobile的的CSS和我们像这样修复它：

.ui-mobile .ui-page-active{display:block;overflow:visible;/*overflow-x:hidden*/}

固定滚动错误我们。

overflow-x: hidden把事情搞乱。

大家都有这个问题，先试试这个吧！ – leymannx

对我而言，此方法有效。谢谢。 –

iOS上的JQuery Mobile滚动不畅通

相关推荐