遮罩层内容滚动防止底层内容跟着滚动

个人在参与项目的时候遇到这个问题，点击一个按钮查询一个接口，查询成功后弹出遮罩层显示查询内容，但是显示的内容又分别基本信息和拓展信息所以会进行滑动，在滑动的同时会带动底层内容一起滑动，遇到过两次这样的问题。

第一次是在使用原生js+jquery+mui框架的时候用的mui框架中的scroll.那个时候是手写的遮罩层外加遮罩层中mui框架scroll滚动，利用z-index设置遮罩层展示在最上面，不会影响到底层内容。
eg:

js中添加执行此方法：

function queryMuiScrollView() {
			mui('.mui-scroll-wrapper').scroll({
				scrollY: true, //是否竖向滚动
				scrollX: false, //是否横向滚动
				startX: 0, //初始化时滚动至x
				startY: 0, //初始化时滚动至y
				indicators: true, //是否显示滚动条
				deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
				bounce: true //是否启用回弹
			});
		}

第二次则是在vue中同样的例子，不过这次遮罩层内容采用的是vux的popup

//关闭重载货车查询内容
    closeFreightQuery() {
      this.showFreightQuery = false;
      this.carinfo_frient_moreFlag = false;
      this.$refs.moreFrientText.innerHTML="更多";
      this.moreFrientImg=moreFrientUrl;
      document.documentElement.style.overflowY = 'auto'; //取消禁止屏幕滚动
    },
    //打开重载货车查询内容
    openFreightQuery() {
      this.showFreightQuery = true;
      document.documentElement.style.overflowY = 'hidden'; //禁止底层div滚动
    },

这次采用的是

document.documentElement.style.overflowY = 'auto'; //取消禁止屏幕滚动
 document.documentElement.style.overflowY = 'hidden'; //禁止底层div滚动

顺便解释下含义：
Document 对象： HTML 文档的根节点，使我们可以从脚本中对 HTML 页面中的所有元素进行访问，相当于window.document
document.documentElement：返回文档的根节点

HTML 文档返回对象为HTML元素

希望可以为大家解惑，有什么问题还请大家帮忙指出来，本人亲测两种情况：第一种安卓/ios兼容，第二种情况亲测安卓可用，ios暂未测试。