小程序中的滾動穿透問題

Mask-Scroll

> 原碼地址*

蒙層防穿透問題

> 蒙層穿透就是，當你用fixed 佈局讓蒙層顯示的時候， 手指滑動屏幕會出現底部內容也滑動的現象. 如圖：

當蒙層出現的時候，你滾動屏幕，底部內容也一塊兒跟着滾動。 這就是蒙層穿透， 也能夠叫 '滾動穿透'. 固然出現這種狀況， 用戶體驗固然是很差的了。 因此做爲一個有點追求的工程師固然是不容許這種狀況的發生了(手動狗頭...)

## 解決方案

這種要分狀況，

• 當蒙層沒有滾動條的時候。
• 當蒙層出現滾動條的時候

1. 當彈窗沒有滾動條的時候。

直接監聽 catch:touchmove 方法， 而後直接返回就能夠了。

代碼能夠去看 fixed 目錄下的文件

主要代碼：

*// wxml*

  <view 

​    class="fixed-mask"

​    bind:tap="hideMsak"

​    wx:if="{{isShowMask}}"

​    catch:touchmove="stopMove">

​    <view class="mask-container" >

​      <view class="mask__item">

​        I am  {{dogName}}

​      </view>

​    </view>

  </view>

  *// css*

  .fixed-mask {

  position: fixed;

  left: 0;

  top: 0;

  height: 100vh;

  width: 100vw;

  background: #333;

  opacity: 0.8;

  z-index: 2;

}

.mask-container {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

}

.mask__item {

  margin: 0 auto;

  background-color: #ff0015;

  text-align: center;

  width: 500rpx;

  height: 500rpx;

  line-height: 500rpx;

  margin-bottom: 20rpx;

}

*// js*

  stopMove () {

​    return;

  }

效果以下：

上面是當彈窗沒有滾動條的狀況， 當彈窗出現滾動條的時候。

哦豁， 完蛋， 彈窗不能滾動了。

2. 當彈窗有滾動條的時候

方法一：

動態給底部滾動的元素 添加固定定位。也就是當出現彈窗的時候添加一個 class 樣式類

效果如圖：

代碼在 scroll1 文件夾。

*//  css* 

.bottom-fixed {

  position: fixed;

  left: 0;

  top: 0;

  overflow: hidden;

}

*// wxml*

 <view class="dog-container {{isShowMask ? 'bottom-fixed' : ''}}"></view>

你們能夠看到 由於底部元素給固定到頁面頂部了， 而不是你點擊彈窗時出現的位置。目前本身尚未找到解決方法。 若是大佬有會的， 不吝賜教。。

*方法二：*

> scroll-view 設置高度 以及縱向滾動方向。

不過scroll-view 會有一些bug

詳情查看

代碼在 scrooll 文件夾

效果以下圖：

[完]

原文連接

【做者簡介：】 Mars 蘆葦科技web前端開發工程師 喜歡 看電影 ，擼鐵 還有學習。擅長 微信小程序開發， 系統管理後臺。訪問 www.talkmoney.cn 瞭解更多

做者主頁：

github

segmentfault