小程序如何实现自定义弹层禁止页面滚动

这篇文章主要介绍小程序如何实现自定义弹层禁止页面滚动，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

10年积累的做网站、成都网站建设经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站制作后付款的网站建设流程，更有大同免费网站建设让你可以放心的选择与我们合作。

方案一：通过小程序自定义组件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 } ```

以上是“小程序如何实现自定义弹层禁止页面滚动”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！

网页标题：小程序如何实现自定义弹层禁止页面滚动
URL分享：https://www.cdcxhl.com/article18/jhsedp.html

成都网站建设公司_创新互联，为您提供小程序开发、域名注册、App开发、静态网站、网站收录、电子商务

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联