使用-webkit溢出滾動在iOS 5中滾動的問題

我有一個固定高度的HTML頁面div應該可滾動（僅垂直）。在iOS 5中這可以通過以下方式實現：使用-webkit溢出滾動在iOS 5中滾動的問題

overflow-y: auto; 
-webkit-overflow-scrolling: touch;

的DIV包含約10個項目的無序列表。

滾動工作，但有時它只會滾動我的手指對角線，甚至水平，而不是垂直，因爲它應該是。

我想知道是否有人遇到過這個問題。我不想認爲這是iOS5中的一個錯誤，但我無法弄清楚我做錯了什麼，因爲大部分時間它工作正常。

來源

2011-11-03 SzilardD

我們可以得到一個演示鏈接嗎？ – Charlie

您是否找到修復或解決方法？我遇到了同樣的問題，無法繞過它... – JohannesD

我開始了一個賞金，所以我可以給它[保羅]（http://stackoverflow.com/a/8707635/458193）。 –

我有完全相同的問題。問題原來是由我的網站用於跟蹤歷史更改和加載腳本的兩個零大小的iframe引起的。刪除這些解決了這個問題。我向蘋果提交了一個bug，等待他們回覆。

檢查您的頁面上是否有任何iframe，它們可能是原因。

來源

2012-01-03 03:36:31

您是否聽說過Apple的任何內容？或者您是否找到了另一種解決方法，而不是刪除iframe？當試圖讓-webkit-overflow-scrolling與[tag：vaadin]一起工作時，我遇到了這個問題。 – JohannesD

碰到這個，看到類似的問題：http://stackoverflow.com/questions/10718296/ios5-overflow-scrolling-horizontally-is-controlled-by-vertical-touch縱向和橫向之間翻轉似乎解決了這個問題。不知道原因，但（我的網頁上沒有iframe）。 – middric

不，翻轉並沒有改變任何東西 - 至少對我來說 – Thariama

你需要把這個CSS設置在你的CSS文件 - 你加載一個使用content_css配置變量：

body { 
    -webkit-transform: translate3d(0, 0, 0); 
}

另一種選擇是直接從TinyMCE的初始化代碼設置CSS：

$(tinymce.activeEditor.getBody()).css('-webkit-transform', translate3d(0, 0, 0));

來源

2012-06-29 06:22:05 Thariama

沒有爲我工作。 –

我已經找到了解決方案哈克，但它需要的JavaScript ...

我偶然發現了這個問題，同時加載通過滾動的節點ajax並添加js。

我發現，與JS重置-webkit-溢出滾動財產化險爲夷

JS代碼：

var myDiv = $('.myDiv'); 
myDiv.css('-webkit-overflow-scrolling','auto'); 
function fn(){ 
    myDiv.css('-webkit-overflow-scrolling','touch'); 
} 
setTimeout(fn,500);

真的很討厭我們必須調用setTimeout方法，但是這就是隻有我能想到的辦法......

編輯：當心display:none

Webkit overflow scrolling touch CSS bug on iPad

來源

2012-10-18 14:13:26

謝謝！這是hacky，但就我而言，這首先是一個iOS錯誤。 –

我在iOS 5.1.1中遇到了同樣的問題，原因是::after僞元素position: fixed位於包含可滾動列表的元素，該列表顯示「錯誤的滾動軸」行爲。 Details here。

來源

2012-11-15 03:35:52 lazd

使用-webkit溢出滾動在iOS 5中滾動的問題

回答

相關問題