ios端h5页面双击页面会发生滚动问题解决办法

ios端h5页面双击页面会发生滚动问题解决办法,第1张

在IOS系统中,H5页面双击会引起页面发生向上滚动,以下代码方法解决这个兼容性问题亲测有用,记录一下
一.在touchmove的时候进行阻止默认事件 (能解决使用了window添加了scroll滚动后,局部禁止滚动的效果,但是ios上双击页面还是会滚动)

document.querySelector(".top-content-scroll").addEventListener("touchmove", function (event) { event.preventDefault();}, false);

二. 对于ios上双击页面还是会滚动,可以添加以下代码解决

let agent = navigator.userAgent.toLowerCase();
    let iLastTouchTime = null;
    if (agent.indexOf('iphone') >= 0 || agent.indexOf('ipad') >= 0) {
        document.querySelector(".top-content-scroll").addEventListener('touchend', 	  	function (event) {
            let iNowTime = new Date().getTime();
            iLastTouchTime = iLastTouchTime || iNowTime+ 1;
            let delta = iNowTime- iLastTouch;
            if (delta < 500 && delta > 0) {
                event.preventDefault();
                return false;
            }
            iLastTouchTime = iNowTime;
        }, false);
    };

l

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/993681.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-21
下一篇 2022-05-21

发表评论

登录后才能评论

评论列表(0条)

保存