移動Safari滾動勢頭不起作用

我現在在響應網站上遇到了一些問題。移動Safari滾動勢頭不起作用

除了其中一頁外，其他頁面都無法獲得通常在手機上使用互聯網的滾動動態。我不確定這是否僅限於移動Safari瀏覽器或其他移動瀏覽器，但我只是在本網站上開始了響應式的工作。

但是，有誰知道爲什麼有些網頁可能沒有滾動的動力？有些頁面對圖像和一些jQuery非常沉重，但我不認爲這足以導致渲染問題。

任何想法？

到dev站點的鏈接是：apt.codeplayground.co.uk。

[編輯]

似乎有與我們.wrapper DIV的問題，因爲這是不包括這是工作有關網頁上，現在我們已經包括它的滾動不能正常工作。

來源

2013-10-23 lukeseager

我剛剛有同樣的問題。我發現this link，它解決了這個問題。

將下面這行css添加到滾動的元素：-webkit-overflow-scrolling：touch;

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

來源

2013-10-23 19:42:33 mark

完美！謝謝！ – lukeseager

只有身體獲得本地滾動。任何有溢出滾動的元素都很慢。觸摸滾動可以解決這個問題，但如果可以的話，最好讓身體滾動。它速度更快，並且使用GPU紋理合成更好。

觸摸滾動並在開始滾動時創建可滾動元素的快照。它將圖像添加爲GPU紋理，然後在停止滾動時破壞GPU紋理。讓身體滾動更好地使用你的紋理記憶，它通常是更好的解決方案。

來源

2013-10-24 04:16:16 puppybits

有趣。你能給這個信息的任何來源？我很想閱讀更多。 – mark

如果您有權訪問蘋果開發人員帳戶，則他們擁有有關瀏覽器工作原理的詳細信息的視頻。 – puppybits

我看着觸摸滾動，它看起來像自iOS4以來更改。在元素上滾動不會停止JavaScript執行，並且不會緩存GPU紋理。紋理仍然像普通元素一樣創建。 http://minus.com/lFZwnKxxBDDyA http://minus.com/lbc3H74BOvk4ey http://jsbin.com/AZiWowe/9 – puppybits

與@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-07 17:40:37 neoswf

移動Safari滾動勢頭不起作用

回答

相關問題