微信公众号H5页面或者其他浏览器,在ios一些机型上,上下左右滑动,可以漏出底部的域名,黑块(或者白块)。
搜索很多网上文档,大都是那几种,但是不顶用
测试环境: ios14.6、微信内置浏览器、或其他浏览器
原理: 修改document的滚动事件,监听滚动赋值元素的scrollTop值
修改如下:
<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(){}) 方法内部即可此处理方案,不是最优解。原始的页面惯性滚动的感觉没有了,现在手指滑动多少滚动多少到此结束,就那么多代码。有兴趣的可以多研究
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)