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

在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- iLastTouchTime;if (delta < 500 && delta > 0) {event.preventDefault();return false;}iLastTouchTime = iNowTime;}, false);};

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

移动端 H5 分屏页面适配问题--设计稿比例与设备宽高比例不同
移动端 H5 分屏页面适配问题单位问题肯定用rem, 为了方便计算,一般取 1rem=100px(设计稿px), 需要根据设计稿的宽度设置合适的fontSize, 具体可以看这篇文章 :移动端根据 ...
【已解决】（uni-app）IOS 端 H5 应用无法发起请求，请求状态码为0，错误描述为request:fail
[已解决](uni-app)IOS 端 H5 应用无法发起请求,请求状态码为0,错误描述为request:fail 目录 [已解决](uni-app)IOS 端 H5 应用无法发起请求,请求状态码为0 ...
解决ios端返回上一个页面不刷新页面的问题
javascript返回上一个页面也许你会立马想到几种方案: 1.<a href="javascript:history.go(-1)">返回上一页</a> ...
移动端H5设计稿的问题与解决办法汇总
前沿就目前来看,移动端的H5是目前的一大趋势,毕竟就目前来说手机占据的极大的市场,人们每次都会在空闲时刻拿起自己的手机浏览网页,应用以及各种内容,但是针对于各种不同的手机长宽比以及分辨率是不同的,如 ...
firefox访问页面直接显示代码问题问题解决办法
情景描述: 调试好的页面,使用IE访问正常,但是使用firefox就会显示全部的代码,访问的页面如下: http://www.cgzg.net/index.shtml 一般来说,FireFox下浏览s ...
jsp登录页面密码equals验证出现问题解决办法
从数据库中取出的密码或者用户名后会带有一串的空格所以equals比较时会显示错误使用trim()函数去除空格就可以了运行成功代码如下: login.jsp <%@ page import= ...
【微信小程序】—— wx.showToast 延迟页面跳转、一闪而过问题解决办法
场景一: 发布文章,点击发布以后用wx.showToast显示发布成功后跳转,但此时基本没显示,直接跳转了解决方法: wx.showToast({title: '发布成功',icon: 'succe ...
transform: translate(-50%,-50%)导致的像素（前端页面字体模糊）模糊问题解决办法
前言 1.在复现过程中发现FireFox并不会出现模糊的问题,而Chrome和新版Edge会有,并且是在有滚动条时才会模糊 2.文本内容是否模糊还与屏幕有关,高清屏(dpr > 2)下不容易触发 ...
vue双向绑定不生效、对象中的属性值发生改变页面不会重新渲染问题解决办法
文章目录 vue双向绑定原理方法一增加一个基本类型的变量方法二使用整体对象替换方法三使用vue文档提供的方法 vue双向绑定原理 vue深入式响应原理,当我们在data中声明变量对象,Vu ...

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

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

最新文章

热门文章