(一) 前言
说来真是搞笑,之前很多交互都是依赖UI库的modal实现,之前也遇到过类似天猫商品列表页面那种下拉筛选,也解决过相关手势问题,但是,后面一个同事再次问起这个问题,回头去总结下,发现之前通过选取dom并为背景和内容分别处理touchmove事件,但是这仅仅是对于h5的一个解决方案,所以总结常见在pc/h5上面分别的处理方案。
(二) PC处理方案
打开蒙层时,给body添加样式:
overflow: hidden;
height: 100%;
在某些机型下,你可能还需要给根节点添加样式:
overflow: hidden;
关闭蒙层时,移除以上样式。
优点:
简单方便,只需添加css样式,没有复杂的逻辑。
缺点:
兼容性不好,适用于pc,移动端就尴尬了。
部分安卓机型以及safari中,无法无法阻止底部页面滚动。
如果需要应用于移动端,那么你可能需要方案二。
(三) 移动端处理方案
移动端可以直接阻止冒泡方式,处理这个问题,
const preventFun = e => e.preventDefault();
export function handleStopTouch() {
document.body.addEventListener('touchmove', preventFun, { passive: true });
}
export functi