微枫

陈在真の老巢

【杂谈笔记】IOS H5页面连击页面发生滚动的解决办法

IOS H5页面如果存在弹出框遮罩层的时候,在监听触摸事件的时候禁止了默认事件和冒泡事件,页面禁止滚动,
但如果连续点击,页面会出现向上滚动bug,可引入下面代码,处理该问题现象:

let agent = navigator.userAgent.toLowerCase(); //检测是否是ios
let iLastTouch = null; //缓存上一次tap的时间
if (agent.indexOf('iphone') >= 0 || agent.indexOf('ipad') >= 0) {
    document.body.addEventListener('touchend', function (event) {
        var iNow = new Date().getTime();
        iLastTouch = iLastTouch || iNow + 1 /** 第一次时将iLastTouch设为当前时间+1 */ ;
        var delta = iNow - iLastTouch;
        if (delta < 500 && delta > 0) {
            event.preventDefault();
            return false;
        }
        iLastTouch = iNow;
    }, false);
}

发表回复