ios微信公众号或浏览器滚动露底漏网址闪动无法固定

微信公众号H5页面或者其他浏览器，在ios一些机型上，上下左右滑动，可以漏出底部的域名，黑块（或者白块）。
搜索很多网上文档，大都是那几种，但是不顶用

测试环境： ios14.6、微信内置浏览器、或其他浏览器
原理： 修改document的滚动事件，监听滚动赋值元素的scrollTop值

修改如下：

<!-- 原生标签和vue、uniapp等可用，react项目基本上不需要，没碰到露底异常 --><template><view id='scrollBox'><view>测试内容</view><view>测试内容</view><view>测试内容</view></view>
</template>


// 拦截document的滚动事件 - 其他的方式我试了没什么用，拦截不掉
document.addEventListener('touchmove', e => e.preventDefault(), {passive: false
});let $startY; //记录开始高度
setTimeout(() => {// 防止虚拟的dom节点scrollBox 没有创建成功document.getElementById("scrollBox").addEventListener("touchstart", function() {$startY = event.touches[0].clientY;})document.getElementById("scrollBox").addEventListener("touchmove", function(event) {let $moveY = event.touches[0].clientY;document.getElementById('scrollBox').scrollTop += $startY - $moveY;$startY = $moveY; //记录上一步结束位置});
})

#scrollBox {/* 高度和溢出一定要设置，body不需要额外设置 */height: 100vh;overflow-y: auto;}#scrollBox view {/* 测试样式 - 可忽略 */height: 50vh;background: #ccc;}

备注：

scrollBox 元素一定要设置高度和溢出滚动，body不需要额外设置
js代码里计时器尽量加上，原生写法不需要，可以在window.onload 或者 $(function(){}) 方法内部即可
此处理方案，不是最优解。原始的页面惯性滚动的感觉没有了，现在手指滑动多少滚动多少

到此结束，就那么多代码。有兴趣的可以多研究

ios微信公众号或浏览器滚动露底漏网址闪动无法固定相关推荐

微信公众号或者浏览器实现在线浏览pdf文件
微信公众号或者浏览器实现在线浏览pdf文件实现在线浏览pdf文件方法开发步骤: 实现在线浏览pdf文件方法我们在日常的开发当中经常需要实现pdf文件的显示,最近做了一个在微信公众号中实现pdf浏 ...
iOS微信公众号自动化测试
最近在测试微信公众号(微信银行),在网上查关于iOS公众号测试的文章很少,而且很麻烦.现在发现最新版的Appium1.9.1支持微信里的H5. 测试环境:Xcode9.iOS11.2.appium ...
html跳转到关注的微信公众号,手机浏览器一键跳转微信公众号关注的方法
参考接口样式:https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=*********==&scene=110==#wec ...
ios 微信公众号上传图片至服务器,axios 上传文件到微信公众号接口提示503错误...
解决方案如下 import axios from 'axios' import * as fs from 'fs' import { HttpDelegate } from './HttpKit' i ...
抖音卡片/快手/小红书/h5浏览器/微博跳转微信/qq/微信公众号/指定链接
首先说明,本文内容及教程均转载自:抖音私信卡片系统源码搭建[图文教程]已经本人允许功能说明: 抖音卡片跳转微信抖音卡片跳转 qq 抖音卡片跳转微信公众号抖音卡片跳转指定网页链接快手跳转 ...
微信公众号的简单开发
这里是修真院前端小课堂,每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方面深度解析前端知识/技能. 今天给大家分享一下,修真院官网 ...
公众平台模板消息所在行业_第三方工具微信公众号模板消息群发如何操作？
当下,公众平台模板消息功能仅支持添加模板,修改所在行业,如果想要群发模板消息,可以自己根据公众平台的接口编程实现,也可通过微号帮平台的模板消息群发功能实现,均可以让微信公众号群发模板消息,模板消息即按 ...
js微信公众号文章链接正则校验
方法一: // 判断是不是微信公众号链接 export function isWxArticleUrl(path) {return /^http[s]?:\/\/mp.weixin.qq.com\/s ...
公众平台模板消息所在行业_如何使用微信公众号第三方平台群发模板消息助手？...
对于微信公众号群发模板消息助手的实现,公众号后台提供了接口编程实现,微号帮平台提供了模板消息群发功能实现,均可以让微信公众号群发模板消息,模板消息即按固定格式的文本模块消息,没有图文形式,纯固定格式的 ...
微信公众号，点击按钮打开pdf文件流，安卓跳转到浏览器里下载，ios可预览但默认不能下载
微信公众号,点击按钮打开pdf文件流,安卓跳转到浏览器里下载,ios可预览但默认不能下载注:在pc上开始时采用这两种方式是没有效果的,或者打开的是空页面,但上线到公众号是没有问题的!!!!!!!!! ...

ios微信公众号或浏览器滚动露底漏网址闪动无法固定

ios微信公众号或浏览器滚动露底漏网址闪动无法固定相关推荐

最新文章

热门文章