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;
	}

备注:

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

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

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值