微信小程序（6）——禁止页面滚动-蒲公英云

微信小程序（6）——禁止页面滚动

▍写在前面（来访者请直接浏览下一条）

最近在做一个美食类小程序的时候，需要用到一个购物车，自己不好构思，就仿照美团的购物车写了一个，然后就在这卡了一下：购物车列表是fixed脱离文本流的，在上下滚动购物车列表的时候，底部的页面竟然也会跟着滚动，这怎么成，所以我就找了一下关于这个问题的解决方案。

▍效果预览

首先小声说一句，为了节约时间，所以在做数据模拟显示的时候，所有的图片还有名称、销量都用了同一个，只是改了一下相应的价格用以区分。

▍实现方法

【注意】本文只记录【禁止页面滑动】的方法，不涉及关于购物车的设计方法。

1、首先设计出一个底部页面；

70 1

2、制作出一个覆盖在上层的模块（当然，最初制作的时候，底部滚动条有时候会跟着购物车的滚动条一起滚动）；

70 2

3、【方法核心】：改变容器的height属性：auto↔100%。

【实际操作】：

3.1：给底部页面设置动态class属性或者id属性用以改变其css样式，这里我使用isHiddenShoppingList这个变量来控制是否要赋予底部页面（container）container-ban这个属性；

70 3

3.2：设置container-ban这个class属性的样式：

.container-ban{
  height: 100%;
  overflow: hidden;
}

一般来说这样就可以实现功能了，但是有时候还是会有特例（仅上述代码无法实现功能），比如我的这个页面就是，即使使用了上面的代码还是无法达到最终预期效果。因为我的这个container-ban它的外部没有我自己编写的view容器，所以它的父级元素是page，而我对page的高度是没有限制的，所以container-ban的height: 100%;并没有起到实际的作用。

3.3：固定底部页面的父级元素的高度为100%；

page{
  height: 100%;
}
.container-ban{
  height: 100%;
  overflow: hidden;
}

最后实现了最终效果。到这里，整个流程就结束了。

▍后续。。。

当我再次用到这个方法时，发现确实实现了禁止页面滚动的效果，但是，同时也带来了副作用：如果底部页面比较长，在固定底部页面时，底部页面会自动跳到页面的最顶端（我本来在页面中间点了一个按钮，想要弹出一个框框，结果点完之后，底部页面直接滚到了最顶端，然后我就不知道我点了列表中的哪一项的按钮，尴尬。。。）而这一切都是overflow: hidden;做的怪。

既然有缺陷，就要找一个更好的方法，要让底部页面不会滚到最顶端，找了半天终于有了收获。终于有了方法：将底部页面用scroll-view包裹，固定的时候就底部页面就不会自动滚动到最顶端了。

方案如下：

page {
  height: 100%;
  overflow-y: hidden;
}
/* scroll-view容器 */
.container {
  height: 100%;
}
<scroll-view class='container' scroll-y='{
   {isHideDialog}}'>
    ……
</scroll-view>