小程序滚动穿透解决方案

发表于 更新于 分类于

前言

滚动穿透是什么

对于这个问题我在网上找到的定义是这样的：

移动端弹出fixed弹窗的话，在弹窗上滑动会导致下层的页面跟着滚动，这个叫 “滚动穿透”

准确的说这更像是一个移动端的 BUG

小程序的滚动穿透

滚动穿透想必大家也是有做过的，但是网上的大多是一些移动端H5的一些滚动穿透的问题，但是对于小程序的滚动穿透解决方案却很少。
其实移动端H5的滚动穿透和小程序的滚动穿透大部分也并没有什么区别，解决思路都是在弹窗呼起的时候固定住底层面板或者不被弹窗内的事件所影响。

解决方案

那我们就来看看小程序滚动穿透已知的几个方案(不负责任的备注: 此处解决方案来源网络综合了主要的解决方案，仅供参考，侵删!!)

  1. 在弹窗内没有滚动的时候，我们在蒙版和弹出层上加入catchtouchmove

  2. 在弹窗内有滚动的时候（比如在弹出层是很多的列表数据，需要滚动时），这里主要有两种方法：
    (1) 在弹窗打开时在底部加position:fixed样式固定住，在弹窗关闭的时候移除这个样式。但是这个样式会导致底部位置回到顶部，而不是打开的弹窗时的位置。如果对产品要求不是很严格的话，这个方法勉强一试。
    (2) 底部使用scroll-view组件而不是用view，但是使用scroll-view组件会有一定的BUG:

    Bug & Tip
    tip: 请勿在 scroll-view 中使用 textarea、map、canvas、video 组件
    tip: scroll-into-view 的优先级高于 scroll-top
    tip: 在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh
    tip: 若要使用下拉刷新，请使用页面的滚动，而不是 scroll-view ，这样也能通过点击顶部状态栏回到页面顶部
    详见：微信小程序开发文档

将就的总结

综上，并没有什么完美的解决方案可以解决小程序内的滚动穿透问题

在2(1)的方法里，我也想过能不能使用微信的wx.pageScrollTo()来解决fixed后的回到顶部的问题，但是并没有什么用（导致底层界面渲染成空白），并不能像移动端H5那样可以使用css+js方案来完美的解决。

附录

附上:移动端H5滚动穿透的解决方案