h5彈出dialog時禁止body滑動(兼容chrome/andriod/ios)

pc/ios使用overflow和touchmove(通用方案, 對android無效)

stopSrcoll()
      {
      var mo=function(e){e.preventDefault();};
        document.body.style.overflow='hidden';
        document.addEventListener("touchmove",mo,false);//禁止頁面滑動
      },
 
openSrcoll()
      {
      var mo=function(e){e.preventDefault();};
        document.body.style.overflow='';//出現滾動條
        document.removeEventListener("touchmove",mo,false);
      },

android使用body fixed曲線解決

body, html {
　　position: fixed;
　　top: 0px;
　　bottom: 0px;
　　width: 100%;
　　height: 100%;
}

彈框前保存body屬性, 取消框時恢復body屬性.

2. top問題
   彈框前獲取body的scrollTop值, 取反設置給top

document.documentElement.scrollTop || document.body.scrollTop

angular實現

 // 彈出後頁面還可以滑動.
  copyBodyStyle(src, target) {
    target.position = src.position;
    target.top = src.top;
    target.bottom = src.bottom;
    target.width = src.width;
    target.height = src.height;
  }

  moveStop(e) { e.preventDefault(); }

  stopSrcoll() {
    if (this.browserService.isIPhone) {
      document.body.style.overflow = 'hidden';  // 關閉滾動條
      document.addEventListener('touchmove', this.moveStop, false);
    } else {
      this.copyBodyStyle(document.body.style, this.bodyStyleBak);
      this.srollTopBak = {
        dom: document.documentElement.scrollTop,
        body: document.body.scrollTop
      };
      Object.assign(document.body.style, {
        position: 'fixed',
        top: '-' + (document.documentElement.scrollTop || document.body.scrollTop) + 'px',
        bottom: '0px',
        width: '100%',
        height: '100%'
      });
    }
  }

  openSrcoll() {
    if (this.browserService.isIPhone) {
      document.body.style.overflow = '';  // 出現滾動條
      document.removeEventListener('touchmove', this.moveStop, false);
    } else {
      this.copyBodyStyle(this.bodyStyleBak, document.body.style);
      document.documentElement.scrollTop = this.srollTopBak.dom;
      document.body.scrollTop = this.srollTopBak.body;
    }
  }