1. 程式人生 > >解決iOS與pad裏ifram無法滑動問題

解決iOS與pad裏ifram無法滑動問題

無法 get css樣式 tlist 一個 安卓 pad ram 添加


今天遇到一個問題,在手機內嵌ifram,在iOS和pad裏只會顯示第一屏的內容,下面的內容加載出來了但是全部在下面,無法滑動展示,
所以特意找了一下方法(經測可用)


在iframe的父容器添加如下css樣式:

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

對於安卓低於4.0版本的瀏覽器不支持overflow的問題,可使用如下js解決(對uc無效):

    
function touchScroll(id) {
                var el = document.getElementByIdx_x(id);
                
var scrollStartPos = 0; document.getElementByIdx_x(id).addEventListener("touchstart", function (event) { scrollStartPos = this.scrollTop + event.touches[0].pageY; event.preventDefault(); }, false); document.getElementByIdx_x(id).addEventListener(
"touchmove", function (event) { this.scrollTop = scrollStartPos - event.touches[0].pageY; event.preventDefault(); }, false); }

解決iOS與pad裏ifram無法滑動問題