移动端的滚动穿透

2021-06-15  本文已影响0人  王善良_

问题:页面很长会有竖向的滚动,有个吸底的工具条,在吸底的工具条内容里手指上下拖动,不拖出外面,也能触发页面的滚动。希望该区域内的的滑动,不触发页面滚动

解决:
ref挂载在最外层

 ref.current.addEventListener('touchmove', e => {
            e.preventDefault();
}, false);

阻止掉后,工具条里面的点击事件依旧生效,只是滑动失效

这种方法只适用于工具条内部不滚动的情况下

如果是一个吸底弹层,弹层内部也要滚动的话,这个方法就不适用,需要加个fixed定位的遮罩层,可以透明背景,
坑点:遮罩层的point-events,必须是auto,如果设置成none的话,还是会有穿透效果

上一篇下一篇

猜你喜欢

热点阅读