移动端H5解决Popup滑动穿透问题(多种方法)

· 我们时常会遇到这样的需求，点击按钮，显示弹层。弹层内容超出弹层高度并可以滑动，但是滑动时会发生滑动穿透的问题，背景内容也会发生滚动。我们显然不希望发生这种问题的发生。

现在就让我们看看如何解决这种问题。

·

1. 通过body的overflow

我们可以在弹层显示的时候，控制doucment.body的overflow属性来让背景多余的内容隐藏来完成阻止背景内容滚动

document.body.style.overflow = 'hidden'  // 弹层显示时
document.body.style.overflow = null  // 弹层不显示时

可能有的机型没有效果，可以试试加上position的效果解决

document.body.style.overflow = 'hidden'  // 弹层显示时
document.body.style.position = 'relative'


document.body.style.overflow = 'auto' // 弹层不显示时
document.body.style.position = null

2. 通过body的position

我们也可以通过body的postion的fixed来解决滑动穿透。当然也会发生页面会自动滚动到顶部的情况。我们可以记录下当前页面的背景内容滚动位置来解决这个问题。(当然这个方法也可以解决上面的问题。)

弹层显示时

// 弹层显示时
let scrollTop = window.pageYOffset || document.documentElement.scrollTop  || document.body.scrollTop
document.body.style.top = (-1 * scrollTop) + 'px'
document.body.style.position = 'fixed'

弹层不显示时

let scrollTop = window.pageYOffset || document.documentElement.scrollTop  || document.body.scrollTop
document.body.style.position = null
document.body.style.top = ''
window.scrollTo(0, scrollTop)

3. 通过css属性overscroll-behavior

overscroll-behavior 属性有 3 个值：

• auto - 默认。元素的滚动会传播给祖先元素。
• contain - 阻止滚动链接。滚动不会传播给祖先，但会显示元素内的原生效果。例如，Android 上的炫光效果或 iOS 上的回弹效果，当用户触摸滚动边界时会通知用户。注意：overscroll-behavior: contain 在 html 元素上使用可防止滚动导航操作。
• none - 和 contain 一样，但它也可以防止节点本身的滚动效果（例如 Android 炫光或 iOS 回弹）。

在具有滚动属性的弹窗节点上添加就可以生效

.mask .popup_content {
  /* position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 9;
  width: 100px;
  height: 200px;
  overflow-y: scroll; */
  overscroll-behavior: contain;
}

还有设置在body上也可以禁止下拉刷新和回弹效果

body {
	/* 禁用默认的下拉刷新和边界效果
     但是依然可以进行滑动导航 */
	overscroll-behavior-y: none;
}