移动Safari滚动动力不起作用

时间:2013-10-23 14:01:02

标签: jquery css mobile scroll mobile-safari

我现在对响应式网站存在一些问题。

除了其中一个页面之外的所有页面都没有获得通常在手机上使用互联网的滚动动量。我不确定这是否仅限于移动版Safari或其他移动浏览器,我刚刚开始在此网站上开展响应式工作。

但是,有谁知道为什么有些页面可能没有滚动动量?有些页面非常沉重,有图像和一些jQuery,但我认为这不足以导致渲染问题。

有什么想法吗?

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

[编辑]

我们的.wrapper div似乎存在问题,因为这个问题没有包含在正常工作的页面中,现在我们已经将它包含在内,滚动无效。

3 个答案:

答案 0 :(得分:27)

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

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

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

答案 1 :(得分:4)

只有身体才能获得原生滚动。任何有溢出滚动的元素都很慢。触摸滚动可以解决这个问题,但如果可以,最好让身体滚动。它更快,并且使用GPU纹理合成得更好。

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

答案 2 :(得分: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>