小程序弹出层禁止列表滑动_小程序自定义弹层禁止页面滚动方案详解

方案一：通过小程序自定义组件scroll-view实现布局，动态修改scroll-y属性

缺点：布局局限于scroll-view组件，大部分需求都满足不了

方案二： 自定义弹层蒙层或者外层容器添加catchtouchmove事件

```js

弹层内容

```

缺点：弹层滑动不了；适用于自定义弹层不滑动的布局

方案三：动态添加给最外层元素添加position:fixed样式

```js

内容区

```

缺点：当isMask为true时，页面始终会回到顶部；体验不好

方案四：通过动态修改样式处理(推荐)

原理： 小程序API给我们动态修改page样式，那我们换个思路，最开始给page设置*overflow:hidden*, 最外层布局设置 *overflow:auto* 但是设置height属性时还是有坑。如下：

- *height:100vh* 时，上拉加载、下拉刷新在安卓端失效，ios没问题；适用于当前页面不需要上拉、下拉刷新。

- *page* 设置 *overlfow:hidden;* 时，安卓端页面整体滑动不了；适用于底层布局不需要滑动

*page* 设置 *overflow: visible*, 以上问题均解决

代码如下：wxml

```js

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)