手机端(android ios)滚动穿透问题

前几天开发时候遇到一个很恶心的问题, h5页面popup弹出后, 在ios手机端拖动蒙层, 整个页面竟然在滚动, 当时在网上查找了很多办法都不太适用, 最后不知道从哪位大佬那边借鉴了一个方法, 亲测可行, 话不多说, 直接上代码 

 1. 在popup弹出时, 先记录body的滚动距离, 然后把给body添加如下样式, 设置fixed, 同时把top值设置成页面的滚动距离, 如此解决body fixed后, 页面滚动到顶部的问题 

export const bodyFixed = () => {

  let scrollTop = document.body.scrollTop || document.documentElement.scrollTop

  document.body.style.cssText += 'position:fixed;width:100%;top:-' + scrollTop + 'px;'

}

2. popup关闭时, body的fixed解除, 防止页面scroll失效, 同时把页面滚动距离设置成fixed时的top值, 防止页面滚动回去.

export const bodyScroll = () => {

  // 解决ios safari蒙层滚动穿透问题

  let body = document.body

  body.style.position = ''

  let top = body.style.top

  document.body.scrollTop = document.documentElement.scrollTop = -parseInt(top, 10)

  body.style.top = ''

}

重新运行代码调试, 大功告成, 世界和平, 下班~

ps: 忘了那位大佬的出处在哪了,没找到原文链接,如有冒犯, 还望海涵