微信小程序禁用页面下拉 且局部上下滚动不卡顿

众所周知，微信小程序页面在下拉后，顶部会出现留白的不友好用户体验（当然，需要启用页面下拉刷新的另说）。官网有禁用下拉的配置，但使用后，如果页面中局部区域需要滚动显示更多内容时，则会出现滚动不顺畅的情况。

一、网上普遍给出的做法，在页面的.json中添加如下配置：

“disableScroll” : true

此方法确实可以禁用掉整个页面的下拉，但若页面有部分区域需要下拉，则这部分内容滚动时会极不顺滑。

经研究，不使用官网提供的配置。而是自己在页面写样式去控制，能更好的实现这种页面整体不下拉，局部区域可顺滑滚动的友好体验，下面给出具体例子加以简要说明：

1. 页面布局截图如下：

上方显示主体的图片banner，下方显示主体的详细信息。因为信息过多，所以下方区域需要滚动来查看更多内容。

2. 对上方图片展示区域设置样式如下：

.banner{position: fixed;height: 350rpx;top: 0rpx;width: 100%;z-index: 9999;}

说明：将上方区域设置fixed固定之后，页面整体不再可以被下拉。且不影响其余区域的滑动效果。

3. 对下方信息展示区域设置样式如下：

.detail-info{margin-top: 350rpx;overflow: auto;height: calc(100% - 450rpx);}

说明：下方设置定高和可滚动后，即可实现滚动操作。