微信网页,浮层内允许滚动,浮层下锁定滚动

  • 微信网页内,在 iOS 下。弹出浮层,锁定浮层下不滚动,允许浮层内滚动
  • 同时,页面有做底部触发懒加载的机制
/**
 * 弹出 Dialog 时,锁定页面不滚动。
 * demo: window.bus.$emit('pageLock')
 */
let scrollTop = ''
let scrollBar = ''
window.bus.$on('pageLock', () => {
  document.documentElement.style.overflow = 'hidden'
  document.body.style.overflow = 'hidden'
  scrollBar = document.documentElement.scrollTop ? document.documentElement : document.body
  scrollTop = document.documentElement.scrollTop || document.body.scrollTop
  document.documentElement.style.position = 'fixed'
  document.documentElement.style.top = ''.concat((-1 * scrollTop), 'px')
  if (document.querySelector('.weui-toptips')) {
    document.querySelector('.weui-toptips').style.display = 'none'
  }
})

window.bus.$on('pageAuto', () => {
  document.documentElement.style.overflow = ''
  document.body.style.overflow = ''
  document.documentElement.style.position = ''
  document.documentElement.style.top = ''
  if (document.querySelector('.weui-toptips')) {
    document.querySelector('.weui-toptips').style.display = 'block'
  }
  scrollBar.scrollTop = scrollTop
})

你可能感兴趣的:(微信网页,浮层内允许滚动,浮层下锁定滚动)