设置遮罩层下的内容不可以滑动,遮罩层上的内容可以滑动

628 阅读1分钟

问题:

  1. 如果直接禁止默认滑动事件,那么两个都不能滑动;
  2. 如果不禁止默认事件,只是阻止点击穿透,那么遮罩层上方的内容滑到底之后就会滑动遮罩层下方的内容

场景:

设置遮罩层之后,又想要禁止遮罩层下的内容滑动,又想要遮罩层上的内容可以滑动

方案:

在遮罩层显示的时候,在不想要滑动的地方设置一个绝对定位,不要阻止touchmove默认事件,不然都不能滑动了,只能滚轮滑动. <div :class=" ['invite-page', {'invite-touch':show}]">

#css
.invite-page{...}
.invite-touch {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}