解决微信小程序自定义弹窗滚动与页面滚动冲突

我一直在想什么样的标题才能描述清楚我想要说的问题，文章中不会写如何创建自定义弹窗,如果有这类需求的同学请移步自行Google。
最近在做微信小程序的开发，涉及到自定义弹窗，然而当我的表单页面过长，同时自定义弹窗也过长，即两者都需要滚动的时候，问题出现了，如下图所示：

test.gif

问题：当我滚动弹窗时，后面的页面也会跟着滚动

1.最初我以为是样式文件中z-index属性的问题，但无论我怎么修改z-index属性，都无果而终。
2.怀疑是我的布局结构不合理，但无论是蒙版布局还是整体布局，以及弹窗的布局，改了又改，换了又换，这个问题依然存在

折腾了好久以后，突然有了想法：

在打开弹窗的时候，让页面不可滚动；关闭弹窗后，恢复页面滚动

实现步骤：

1.整个布局用<scroll-view>作为根节点包裹所有view，并动态绑定scroll-view的scroll-y属性<scroll-view scroll-y="{{isScroll}}">
2.样式文件中设置Page的overflow-y属性值为hidden
3.样式文件中设置scroll-view的height属性值为100%
4.打开自定义弹窗的点击事件中，更改isScroll的值为false，关闭弹窗的点击事件中，更改isScroll的值为true

结果如下图：

result.gif

这样就解决了弹窗与页面的滑动冲突，算是投机取巧吧，有碰到这个问题的同学可以参考一下，如果有疑问或者更好的解决办法，麻烦告知我，在此谢过~
下面，附上demo的源代码：
1.JS:

// text005.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

    arrayData: null,
    dialogData: null,
    isDialogShow: false,
    isScroll: true
  
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  
    //构建测试数据
    let data = new Array();
    let dialog = new Array();
    for(let i = 0; i < 25; i++){
      data[i] = '我是测试-----------' + i;
      dialog[i] = {
        name: '我是弹窗-' + i,
        isSelected: false
      };
    }
    this.setData({
      arrayData: data,
      dialogData : dialog
    });
  },

  /**
   * 显示、关闭弹窗
   */
  showDialog: function (e) {
    var currentStatu = e.currentTarget.dataset.statu;
    console.log('currentStatu:', currentStatu);
    //关闭  
    if (currentStatu == "close") {
      this.setData({
        isDialogShow: false,
        isScroll: true
      });
    }
    // 显示  
    if (currentStatu == "open") {
      this.setData({
        isDialogShow: true,
        isScroll: false
      });
    }
  },

  
})

2.wxml：

<!--text005.wxml-->
<scroll-view scroll-y="{{isScroll}}"> 

  <view class="rootView">

    <view class="inTable">

      <view wx:for="{{arrayData}}" wx:key="" class="unitItemLeft" bindtap="showDialog" data-statu="open">
        <input class="baseItemWithBorder" value="{{item}}"  disabled />
      </view>

      <!--测试弹窗-->  
      <view class="dialogMarsk" bindtap="showDialog" data-statu="close" wx:if="{{isDialogShow}}"></view>  
        <!--dialog-->
      <view class="dialog" wx:if="{{isDialogShow}}">

        <view class="appreciationTitle">
          <text style="font-size:24px;">我是弹窗</text>
        </view>

        <view wx:for="{{dialogData}}" class="appreciationTable">
          <view class="unitItemLeft">
            <text class="baseItemWithBorder">{{item.name}}</text>
          </view>
        </view>

      </view> 

    </view>

  </view>

</scroll-view> 

3.wxss：

/* text005.wxss */
Page {
  /* background: #1baceb; */
  position: absolute;
  font-size: 36rpx;
  width: 100%;
  height: 100%;
  display: block;
  background: #FAFAFA;
  overflow-y: hidden;
}

 scroll-view {
  height: 100%;
} 

.rootView{
  /* width: 100%; */
  padding: 10rpx;
  display: flex;
  flex-direction: column;
}

.baseItemWithBorder{
  flex-grow: 1;
  height: 100%;
  padding-left: 20rpx;
  padding-right: 20rpx;
  border-bottom: solid 1rpx gainsboro;
}

.inTable{
  width: 100%;
  display: flex;
  box-shadow:5px 5px 10px gray;
  flex-direction: column;
  margin-top: 40rpx;
  background: white;
}

.inDetail{
  width: 100%;
  height: 80rpx;
  display: flex;
}

.unitLeft{
  justify-content: flex-start;
  padding-left: 20rpx;
}

.unitItemLeft{
  width: 100%;
  height: 80rpx;
  display: flex;
  flex-direction: row;
}

.dialogMarsk {  
  width: 100%;  
  height: 100%;  
  position: fixed;  
  top: 0;  
  left: 0;  
  z-index: 1000;  
  background: rgba(0, 0, 0, 0.6);
  overflow: hidden;  
}
  
.dialog {
  width: 80%;
  height: 50%;  
  position: fixed; 
  top: 10%;
  z-index: 1001;  
  background: #FAFAFA;
  border-radius: 3px;
  overflow-y: scroll;
}

.appreciationTable{
  width: 98%;
  display: flex;
  flex-direction: column;
  background: white;
  margin: 0 10rpx;
}

.appreciationTitle{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
}