溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹小程序如何實現自定義彈層禁止頁面滾動，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
方案一：通過小程序自定義組件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 } ```以上是“小程序如何實現自定義彈層禁止頁面滾動”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
