h5弹出dialog时禁止body滑动(兼容chrome/andriod/ios)

最新推荐文章于 2022-09-24 10:00:17 发布

daduryi

最新推荐文章于 2022-09-24 10:00:17 发布

阅读量427

点赞数 1

分类专栏： html

本文链接：https://blog.csdn.net/daduryi/article/details/103589944

版权

html 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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属性.

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;
    }
  }