移动 Safari 滚动势头不起作用答案

【问题标题】：Mobile Safari scroll momentum not working移动 Safari 滚动势头不起作用
【发布时间】：2013-10-23 14:01:01
【问题描述】：

我目前在响应式网站上遇到了一些问题。

除了其中一个页面外，所有页面都无法获得通常在手机上使用互联网时所获得的滚动动力。我不确定这是否仅限于移动 Safari 或其他移动浏览器，我才刚刚开始在此站点上进行响应式工作。

但是，有谁知道为什么有些页面可能没有滚动动力？有些页面包含大量图像和一点 jQuery，但我认为这不足以导致呈现问题。

有什么想法吗？

开发站点的链接是：apt.codeplayground.co.uk。

[编辑]

我们的.wrapper div 似乎有问题，因为它没有包含在正常工作的 about 页面中，现在我们已经包含它，滚动无法正常工作。

【问题讨论】：

标签： jquery css mobile scroll mobile-safari

【解决方案1】：

我也遇到了同样的问题。我找到了this link，解决了这个问题。

将这行css添加到滚动的元素中：-webkit-overflow-scrolling: touch;

#element_that_scrolls
{
    overflow:auto;
    -webkit-overflow-scrolling: touch;
}

【讨论】：

太好了，谢谢！我在使用 JQuery Mobile、iOS 和无限滚动时遇到了这个问题，您必须为其设置一个高度才能使 .scrollTop() 正常工作。

【解决方案2】：

只有正文获得本机滚动。任何具有溢出滚动的元素都非常慢。触摸滚动可以解决这个问题，但如果可以的话，最好让正文滚动。它速度更快，并且使用 GPU 纹理合成效果更好。

当您开始滚动时，触摸滚动可创建可滚动元素的快照。它将图像添加为 GPU 纹理，然后当您停止滚动时，它会破坏 GPU 纹理。让身体滚动更好地使用您的纹理内存，这通常是更好的解决方案。

【讨论】：

多么有趣。您能提供此信息的任何来源吗？我很想了解更多。
如果您可以访问苹果开发者帐户，他们会提供有关浏览器工作原理的视频。
我查看了触摸滚动，它看起来自 iOS4 以来发生了变化。滚动元素不再停止 javascript 执行，也不会缓存 GPU 纹理。纹理仍然像普通元素一样创建。 minus.com/lFZwnKxxBDDyA minus.com/lbc3H74BOvk4ey jsbin.com/AZiWowe/9

【解决方案3】：

除了@Mark 所说的，关于 css 属性，我们需要记住这个属性需要提供给滚动内容的父级。

意思是动量可以作用于需要滚动内容的容器。不是直接在内容上，否则他就是无法理解如何以及为什么赋予动力。

.element_that_scrolls
{
    overflow:auto;
    -webkit-overflow-scrolling: touch;
} 

//Wrong
<ul class="element_that_scrolls">
    ...
</ul>

//Correct
<div class="element_that_scrolls">
    <ul>
        ...
    </ul>
</div>

【讨论】：