评论

如何彻底解决小程序滚动穿透问题

解决微信小程序滚动穿透的终极方案。

背景

俗话说,产品有三宝:弹窗、浮层加引导,足以见弹窗在产品同学心目中的地位。对任意一个刚入门的前端同学来说,实现一个模态框基本都可以达到信手拈来的地步,但是,当模态框里边的内容滚动起来以后,就会出现各种各样的让人摸不着头脑的问题,其中,最出名的想必就是滚动穿透。

什么是滚动穿透?

滚动穿透的定义:指我们滑动顶层的弹窗,但效果上却滑动了底层的内容。

具体解决方案分析如下:

  • 改变顶层:从穿透的思路考虑,如果顶层不会穿透过去,那么问题就解决了,所以我们尝试给蒙层加catchtouchmove,但是发现部分场景无效果,那么就不再赘述了。
  • 改变底层:既然是顶层影响了底层,要是底层不会滚动,那就没这个问题了。

如何改变底层解决该问题呢?

不成熟方案:

  • 底部页面最外层view设置position: fixed;页面不可滚动,但是这个时候会导致页面回到顶部。
  • 滚动时监听滚动距离,弹窗时记录滚动位置,关闭弹窗后使用wx.pageScrollTo回滚到记录的位置。

成熟方案

page-meta组件:

通过该组件我们可以直接操作Page组件 ,我们给它的wxss样式overflow动态设置hiddenorvisibleorauto 就可以控制整个页面是否可以滚动。


wx.setPageStyle方法:

调用这个api,动态设置它为hidden/auto,用于控制页面是否可滚动,主要用于页面组件内使用,比如封装好的弹窗组件,就不用单独写page-meta组件了。。

wx.setPageStyle({
   style: {
     overflow: 'hidden' // ‘auto’
   }
})

老规矩,结尾放代码片段:

https://developers.weixin.qq.com/s/U6ItgQmP7upQ

拓展

支付宝小程序虽然存在page-meta组件,但是由于内核为69版本,给page设置overflow: hidden 也无法控制底部元素不可滚动,目前已联系支付宝的底层开发同学提供API控制页面disableScroll,目前正在封装Appx,近期开放。

最后一次编辑于  08-06  
点赞 50
收藏
评论

20 个评论

  • 小刘
    小刘
    2021-12-13

    跟 web 里面的 Helmet 组件有点儿类似,可以用来修改 page-meta 信息。

    2021-12-13
    赞同 2
    回复
  • 2021-10-19

    page-meta 组件在 iPhone8 上无效,大佬们有遇到这种兼容问题吗?

    2021-10-19
    赞同 1
    回复 19
    • TNT
      TNT
      2021-10-20
      查看下你的微信客户端版本是多少,再看对应的基础库是多少。这个组件有最低基础库限制的
      2021-10-20
      1
      回复
    • 2021-10-20回复TNT
      好的,我看下,感谢回复。
      2021-10-20
      回复
    • 2021-10-20回复TNT
      手机微信升级到最新版本8.0.15,调试基础库为2.20.0。还是没生效
      2021-10-20
      回复
    • TNT
      TNT
      2021-10-20回复
      提供代码片段看下。我看下你是不是写错了。。。
      2021-10-20
      回复
    • 2021-10-20回复TNT
      2021-10-20
      回复
    查看更多(14)
  • yimi🌸
    yimi🌸
    2021-10-15

    弹窗弹出时,直接把底部的scroll-view的scroll-y设置为false,就可以阻止底层滚动了呀,不需要用这个page-meta吧

    2021-10-15
    赞同 1
    回复 2
    • TNT
      TNT
      2021-10-15
      底部内容超出一屏。弹窗内有滚动会导致滚动穿透。而这个组件的作用跟 h5的控制body设置为overflow hidden控制底部不可滚动 是一样的原理。
      2021-10-15
      回复
    • yimi🌸
      yimi🌸
      2021-10-18回复TNT
      哦,我知道了,我以为最外层结构是scroll-view,没看清。这个的确是最佳方法👍
      2021-10-18
      回复
  • 困难
    困难
    2021-10-08

    感谢大佬。之前用catchtouchmove解决,后来弹窗变复杂就突然不好使了。。这个方法确实简单快捷

    2021-10-08
    赞同 1
    回复
  • 悦己
    悦己
    2021-07-15

    麻烦问下pageMeta在taro中怎么使用啊?

    2021-07-15
    赞同 1
    回复 3
    • 夜 惊 魂
      夜 惊 魂
      2021-08-03
      请问你解决了嘛😂
      2021-08-03
      回复
    • Gavin
      Gavin
      2021-08-24
      Taro有个方法你可以看看
      2021-08-24
      1
      回复
    • 东昇鸿旭
      东昇鸿旭
      发表于移动端
      2022-03-10回复Gavin
      、:-:
      2022-03-10
      回复
  • 陈关羽
    陈关羽
    2021-05-31

    老哥 这个方法很稳

    2021-05-31
    赞同 1
    回复
  • 来一间
    来一间
    2021-05-14

    https://developers.weixin.qq.com/community/develop/article/doc/000e40918dc420f5f61c2001a56013,这一篇写得特别详细,楼主也可以看看!

    2021-05-14
    赞同 1
    回复 4
    • HGP
      HGP
      2021-05-19
      这个链接是广告,然后这个层主是s13
      2021-05-19
      24
      回复
    • 🐸
      🐸
      2022-09-19回复HGP
      必须登录给你个赞
      2022-09-19
      回复
    • 骑着毛驴逗你玩儿
      骑着毛驴逗你玩儿
      03-27
      拉出去弹蛋蛋 10 分钟...
      03-27
      回复
    • DOT_
      DOT_
      1天前
      傻13 祝你的公司早日倒闭,老板死刑,员工无期
      1天前
      回复
  • 思涵欧尼
    思涵欧尼
    11-15

    大佬你好,用了你的方法,外层是不滚动了,内层也不滚动了

    11-15
    赞同
    回复 2
  • 惬意
    惬意
    07-19

    我就发现不管什么东西用到极致就会发现他的bug,完事官方还不给解决

    07-19
    赞同
    回复 1
    • TNT
      TNT
      07-19
      习惯了就好了。。。反正是开发者买单
      07-19
      回复
  • 浮行
    浮行
    07-05

    简直太神奇了,一开始还不清楚这是个什么用法,以为要把page-meta最为页面容器来用,谁知道把他单独扔在那里就ok了,效果也是稳稳地实现了,爆赞

    07-05
    赞同
    回复 1
    • TNT
      TNT
      07-05
      👌,在封装的组件里使用API的形式
      07-05
      回复

正在加载...

登录 后发表内容