解决Vue移动端弹窗滚动穿透

描述现象:

  • 弹窗内容滑动到底部,再向上滑动弹窗底部内容跟随滑动;

  • 弹窗内容滑动到顶部,再向下滑动弹窗底部内容跟随滑动;

解决办法:

在弹窗显示时,设置body的style的overflow属性值为hidden,弹窗关闭时恢复原来设置;

//解决弹窗遮罩滚动问题
toggleShadowIosScroll(visible) {
    document.body.style.overflow = visible ? 'hidden' : 'scroll';
},

若未生效,可再对id为app的div标签的style增加overflow设置,如下:

document.getElementById('app').style.overflow = visible ? 'hidden' : 'scroll'

你可能感兴趣的:(前端,vue.js,javascript)