码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2017-06-26 15:36:15      阅读:327      评论:0      收藏:0      [点我收藏+]

标签:加载   webkit   default   flow   添加   解决   start   内容   doc   


今天遇到一个问题,在手机内嵌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无法滑动问题

标签:加载   webkit   default   flow   添加   解决   start   内容   doc   

原文地址:http://www.cnblogs.com/liyuanqing/p/7080725.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!