移动版Safari滚动惯性失效

Question

我目前遇到一个响应式网站的问题。除了一个页面之外，所有页面在手机上使用互联网时都没有滚动惯性。我不确定这是否仅限于移动Safari或其他移动浏览器，我刚刚开始对此站点进行响应式设计工作。

但是，有人知道为什么某些页面可能没有滚动惯性吗？其中一些页面具有较重的图像和少量jQuery，但我认为这不足以引起渲染问题。

有任何想法吗？

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

[编辑]

似乎我们的.wrapper div存在问题，因为它没有包含在关于页面中，现在我们已经将其包含在内，滚动不正常。

- lukeseager

Answer 1

我刚遇到同样的问题。我找到了这个链接，解决了这个问题。

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

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

- Mark

---

非常棒，謝謝！我在使用 JQuery Mobile、iOS 和無限滾動時遇到了這個問題，為了使 .scrollTop() 正確工作，必須設置高度。 - Jonny

Answer 2

除了 @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>

- neoswf

Answer 3

仅限于具备原生滚动条的主体元素。任何溢出滚动的元素都会变得非常缓慢。触摸滚动可以解决这个问题，但如果可能的话最好让主体元素滚动。它更快，而且可以更好地利用GPU纹理合成。

触摸滚动会在开始滚动时创建可滚动元素的快照。它将该图像作为GPU纹理添加，然后在停止滚动时销毁GPU纹理。让主体元素滚动可以更好地利用你的纹理内存，并且通常是更好的解决方案。

- puppybits

---

很有趣。你能提供这些信息的来源吗？我很想多了解一些。 - Mark

如果您有苹果开发者账户，他们会提供一些关于浏览器工作原理的视频，其中包含很多细节。 - puppybits

我研究了一下触摸滚动，看起来自iOS4以来已经发生了变化。在元素上滚动不再停止JavaScript执行，并且它不会缓存GPU纹理。纹理仍然像普通元素一样创建。http://minus.com/lFZwnKxxBDDyA http://minus.com/lbc3H74BOvk4ey http://jsbin.com/AZiWowe/9 - puppybits