前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >ios端h5页面双击页面会发生滚动问题解决办法

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

原创
作者头像
IT工作者
发布2022-07-28 14:09:07
1.5K0
发布2022-07-28 14:09:07
举报
文章被收录于专栏:程序技术知识程序技术知识

在IOS系统中,H5页面双击会引起页面发生向上滚动,以下代码方法解决这个兼容性问题亲测有用,记录一下

一.在touchmove的时候进行阻止默认事件 (能解决使用了window添加了scroll滚动后,局部禁止滚动的效果,但是ios上双击页面还是会滚动)

代码语言:javascript
复制
document.querySelector(".top-content-scroll").addEventListener("touchmove", function (event) { 
event.preventDefault();}, false);

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

代码语言:javascript
复制
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- iLastTouchTime;
            if (delta < 500 && delta > 0) {
                event.preventDefault();
                return false;
            }
            iLastTouchTime = iNowTime;
        }, false);
    };

l

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档