解决iOS与pad里ifram无法滑动问题

Posted 元庆

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了解决iOS与pad里ifram无法滑动问题相关的知识,希望对你有一定的参考价值。


今天遇到一个问题,在手机内嵌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无法滑动问题的主要内容,如果未能解决你的问题,请参考以下文章

滑动时 ViewPager 更新片段

jquery mobile 滑动面板 - 在包含 iframe 的区域上滑动事件

IOS webview iframe 引入第三方页面白屏

解决 swiper插件 嵌入 iframe 不能滑动问题

ios上网页iframe里,把页面下拉,进行元素的隐藏显示和增删节点的dom操作页面会瞬间回到顶部

无法通过接口获取与片段通信的活动