modal 遮罩层，滚动穿透 bug

modal 遮罩层，滚动 穿透bug

float 弹层

taro 小程序弹框 滚动击穿 问题

https://segmentfault.com/q/1010000011134345

---

solution

disable scroll event

  handleTouchScroll = (flag = `true`) => {
    log(`touch scroll`)
    // if (ENV !== Taro.ENV_TYPE.WEB) {
    //   return
    // }
    document.body.addEventListener(`scroll`, () => {
      log(`no scroll event`)
    });
    let scrollTop = 0;
    if (flag) {
      scrollTop = document.documentElement.scrollTop
      // 使body脱离文档流
      document.body.classList.add('at-frozen')
      // 把脱离文档流的body拉上去！否则页面会回到顶部！
      document.body.style.top = `${-scrollTop}px`
    } else {
      document.body.style.top = null
      document.body.classList.remove('at-frozen')
      document.documentElement.scrollTop = scrollTop
    }
  }

---

modal OK

弹框， 无穿透问题

https://taro-ui.jd.com/#/docs/modal

https://github.com/NervJS/taro-ui/tree/dev/src/components/modal

toast

https://taro-ui.jd.com/#/docs/toast

---

css style

OK

1. height 100%/ 100vh

2. overflow hidden

js ??? stop scroll event

---

---

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---