美文网首页
小程序弹窗阻止滑动的两种方法

小程序弹窗阻止滑动的两种方法

作者: w晚风 | 来源:发表于2020-11-20 11:29 被阅读0次

    弹出 fixed 弹窗后,在弹窗上滑动会导致下层的页面一起跟着滚动。

    场景1:弹窗内无滚动内容

    可以在弹窗最外层元素绑定touchmove事件,触发事件返回false即(在vue类框架中也可以加.stop阻止冒泡)。

    简单写法:

    catchtouchmove='true'
    

    此种方式会阻止弹窗内内容的滚动。

    场景二:弹窗内有滚动内容

    在弹窗外层根元素动态添加一个no-scroll样式,定义no-scroll为{height: 100%; overflow: hidden;}

    当需要阻止滑动的弹窗显示时添加no-scroll,弹窗关闭去掉no-scroll即可。

    此种方式的缺点是当弹窗显示增加no-scrll后弹窗下面的页面会回到顶部。

    相关文章

      网友评论

          本文标题:小程序弹窗阻止滑动的两种方法

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