关于小程序遮罩层滚动穿透问题（uni-app、微信小程序实测）

先上一张示例图，但是因为公司的项目不便展示数据内容

就是上面这一层可以随意滚动选择

这个问题遇到的时候我找了很多解决方法，什么说给元素增加事件等等，写JS等，基本都不可行。

下面说一下应该怎么操作实现

uni-app中我使用的是uni自带的抽屉组件，直接上代码

<uni-drawer :visible="drawerShow" mode="right">
        <view class="drawer-mask">
          <view class="drawer-content">
            <view>
              <Subtitle msg="测试测试" />
            </view>
            <view class="dept-content">
              <view class="dept-item" v-for="(item, index) in  deptlist" :key="index" :class="[item.checked?'active':'']" @click="chooseDept(index)">{{ item.OrgName }}</view>
            </view>
            <view class="dept-btns">
              <button class="btn reset" @click="resetDept">重置</button>
              <button class="btn enter" @click="enterDept">确定</button>
            </view>
          </view>
        </view>
      </uni-drawer>

记得一定要增加一个容纳元素，也就是我这里面类名为drawer-mask的元素用来让我们的内部元素自动撑开，高度不会变成0

以下是遮罩层的所有样式，使用了flex布局，这样就不论字数多少都能够对齐，想起这样的好处不用我多说。推荐使用flex。

.drawer-mask {
    height: 100%;
    overflow: auto;
    width: 600upx;
    position: relative;
    .dept-content {
      display: flex;
      align-items: left;
      flex-wrap: wrap;
      justify-content: flex-start;
      padding: 20upx 0 100upx 0;
      .dept-item {
        flex: 0 0 42%;
        display: flex;
        align-items: center;
        border: 1px solid #eaeaea;
        justify-content: center;
        color: #333;
        border-radius: 50upx;
        text-align: center;
        padding: 10upx 15upx;
        margin-top: 20upx;
        margin-left: 10upx;
        font-size: 28upx;
        &.active{
          color: #c13125;
          border: 1px solid #c13125;
        }
      }
    }
    .dept-btns{
      position: fixed;
      bottom: 0;
      width: 100%;
      display: flex;
      .btn{
        flex: 0 0 50%;
        border: 0;
        height: 80upx;
        line-height: 80upx;
        border-radius: 0;
        font-size: 38upx;
      }
      .reset{
        background-color: #eaeaea;
      }
      .enter{
        background-color: #c13125;
        color: #fff;
      }
    }
  }

uni-app这个功能就完成了，单纯用css就可以解决。

微信小程序上我使用的是iview的抽屉组件，原理是一样的，就是给抽屉组件增加一个内部容纳的元素，来撑起我们内部元素的高度，这样就滚动穿透问题就可以解决了，我这里就不再赘述了。