8

I'm having a bit of an issue with a responsive site at the moment.

All but one of the pages don't get the scroll momentum you would normally get from using the Internet on your phone. I'm not sure if this is restricted to mobile safari or other mobile browsers, I've only just started the responsive work on this site.

But, does anyone know why some pages might not have scroll momentum? Some of the pages are quite heavy with images and a little jQuery, but I wouldn't think there's enough to cause rendering issues.

Any ideas?

The link to the dev site is: apt.codeplayground.co.uk.

[EDIT]

There appears to be a problem with our .wrapper div, as this wasn't included on the about page that was working, now we've included it the scroll doesn't work properly.

4

3 回答 3

28

我只是有同样的问题。我找到了这个链接，它解决了这个问题。

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

#element_that_scrolls
{
    overflow:auto;
    -webkit-overflow-scrolling: touch;
}
于 2013-10-23T19:42:33.660 回答
4

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

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

于 2013-10-24T04:16:16.300 回答
4

与@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>
于 2014-04-07T17:40:37.970 回答