美文网首页
移动端的滚动穿透

移动端的滚动穿透

作者: 王善良_ | 来源:发表于2021-06-15 15:41 被阅读0次

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

    解决:
    ref挂载在最外层

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

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

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

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

    相关文章

      网友评论

          本文标题:移动端的滚动穿透

          本文链接:https://www.haomeiwen.com/subject/nnmzeltx.html