小程序自定義彈層禁止頁面滾動方案詳解

方案一：經過小程序自定義組件scroll-view實現佈局，動態修改scroll-y屬性 缺點：佈局侷限於scroll-view組件，大部分需求都知足不了

方案二： 自定義彈層蒙層或者外層容器添加catchtouchmove事件

```js
<view class='mask-box' catchtouchmove='preventTouchMove'>彈層內容</view>
```
缺點：彈層滑動不了；適用於自定義彈層不滑動的佈局

方案三：動態添加給最外層元素添加position:fixed樣式

```js
	<view style='{{isMask ? "position:fixed;top:0;left:0;" : " " }}'>內容區</view>
```
缺點：當isMask爲true時，頁面始終會回到頂部；體驗很差

方案四：經過動態修改樣式處理（推薦）

原理： 小程序API給咱們動態修改page樣式，那咱們換個思路，最開始給page設置*overflow:hidden*, 最外層佈局設置 *overflow:auto* 可是設置height屬性時仍是有坑。以下：
- *height:100vh* 時，上拉加載、下拉刷新在安卓端失效，ios沒問題；適用於當前頁面不須要上拉、下拉刷新。
- *page* 設置 *overlfow:hidden;* 時，安卓端頁面總體滑動不了；適用於底層佈局不須要滑動
*page* 設置 *overflow: visible*, 以上問題均解決

代碼以下：wxml

```js
<view class="content {{isMask ? 'page-hidden' : ''}}">

page {

overflow: visible; height: 100%; } .group-buying-list{ height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; } .page-hidden{ overflow: hidden } ```

此文章出自 [https://juejin.im/post/5d5a9bad51882541082a93dc?utm_source=gold_browser_extension](https://juejin.im/post/5d5a9bad51882541082a93dc?utm_source=gold_browser_extension)