首页 > 代码库 > 解决iOS与pad里ifram无法滑动问题

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

2024-10-12 06:05:02   215人阅读


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


联系
我们