小程序如何實現(xiàn)自定義彈層禁止頁面滾動

這篇文章主要介紹小程序如何實現(xiàn)自定義彈層禁止頁面滾動，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

方案一：通過小程序自定義組件scroll-view實現(xiàn)布局，動態(tài)修改scroll-y屬性 缺點：布局局限于scroll-view組件，大部分需求都滿足不了

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

```js
<view class='mask-box' catchtouchmove='preventTouchMove'>彈層內(nèi)容</view>
```
缺點：彈層滑動不了；適用于自定義彈層不滑動的布局

方案三：動態(tài)添加給最外層元素添加position:fixed樣式

```js
	<view style='{{isMask ? "position:fixed;top:0;left:0;" : " " }}'>內(nèi)容區(qū)</view>
```
缺點：當(dāng)isMask為true時，頁面始終會回到頂部；體驗不好

方案四：通過動態(tài)修改樣式處理（推薦）

原理： 小程序API給我們動態(tài)修改page樣式，那我們換個思路，最開始給page設(shè)置*overflow:hidden*, 最外層布局設(shè)置 *overflow:auto* 但是設(shè)置height屬性時還是有坑。如下：
- *height:100vh* 時，上拉加載、下拉刷新在安卓端失效，ios沒問題；適用于當(dāng)前頁面不需要上拉、下拉刷新。
- *page* 設(shè)置 *overlfow:hidden;* 時，安卓端頁面整體滑動不了；適用于底層布局不需要滑動
*page* 設(shè)置 *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 } ```

以上是“小程序如何實現(xiàn)自定義彈層禁止頁面滾動”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！