解決 iframe 在 iPad 上無法滾動的問題

昨天用iframe模擬原生應用的webview功能，巢狀乙個**或本地html，今天通過測試，在ipad會出現頁面無法滾動的問題。iframe的寬高都為螢幕的寬和高，設定屬性scrolling=『auto』，以及樣式overflow: auto都沒用，而且iframe元素不支援touch事件，在iframe巢狀的網頁內部用js實現滾動也不現實。

怎麼讓ipad safari 中的iframe的內容在固定大小中可滾動？

網上說要用seamless屬性。直接寫個seamless。但是這個屬性ipad的safari不支援。chrome是支援的。

ie6 – windows: no support

ie7 – windows: no support

ie8 – windows – windows: no support

ie9 beta – windows: no support

firefox 3.6 – windows: no support

firefox 3.6 – osx: no support

firefox 4.0 – beta windows: no support

firefox 4.0 – beta osx: no support

safari osx: no support

chrome 7 – windows: no support

chrome 7 – windows: no support

chrome 9 – osx: no support

opera 11 – osx: no support

以上方法都無法解決ipad safari中iframe滾動的問題。

解決方法：

在iframe外加一層div，設定樣式

-webkit-overflow-scrolling:touch; overflow: scroll;

另外，如果iframe的src不是**，而是本地的html，則需要給html的dom新增監聽事件，讓html的body可以監聽到touch事件，讓巢狀的html也可以滾動。

js**：

var toscrollframe = function(iframe, mask) 

//do nothing if not ios devie
var mousey = 0;
var mou*** = 0;
jquery(iframe).ready(function() );
//update scroll position based on initial drag position
jquery(iframe).contents()[0].body.addeventlistener('touchmove', function(e) );
});return true;
};toscrollframe('.myframe', '.mymask');

header - use 2 fingers to scroll contents:

在Ubuntu上給ipad充電

ipad連到ubuntu電腦上 提示沒在充電 google了一下發現了乙個ipad charge專案 位址是不過安裝好執行ipad charge提示 ipad charge ipad charge unable to claim inte ce error 5 ipad charge entity ...

我在ipad上用的應用程式

工作用的 dropbox 工作用軟體的首選無疑是dropbox，我的所有工作文件都放在dropbox裡，無論是windows linux mac系統裡都是這樣，有了它ipad上也能方便的開啟工作文件。evernote 網上剪輯的文件，隨手記。各類不想放在dropbox裡的文件，都放在evernote...

在Mac電腦上為iPhone或iPad錄屏的方法

在以前的mac和ios版本下，錄製iphone或者ipad螢幕操作是一件稍微複雜的事情。但是隨著yosemite的出現，在mac電腦上為iphone或ipad錄屏的方法就變得簡單了。下面就介紹一下具體的操作步驟 作業系統的準備 mac電腦 需要公升級到yosemite及其以上版本 iphone或者i...