移动端H5滚动穿透解决方案

最新推荐文章于 2024-12-10 15:18:29 发布

weixin_30624825

最新推荐文章于 2024-12-10 15:18:29 发布

阅读量115

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/alphafly/p/6000309.html

本文介绍了一种解决iOS10下H5页面弹窗滚动穿透问题的方法。通过JavaScript读取页面scrollTop值，并利用CSS定位技术固定底层内容，实现彻底解决滚动穿透问题，适用于移动端浏览器及Hybrid应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近遇到一个很巨恶心的问题 ios10下面页面弹窗有滚动穿透问题

各种google 终于找到了答案，但是体验还不是很好，基本能忍受

废话不多说，上方法

最后终于想到一个处理方案，就是第一种方案的升级版，需要配合JS，大致思路是弹窗显示时JS读取这时页面的scrollTop，然后将主体内容position:fixed，top设为scrollTop的负值，这样可以从根本上固定下层内容，然后隐藏弹窗时再将主体内容position:static;scrollTop设回来。完美解决问题。经测试这种方案在移动端设备都试用，包括浏览器和hybrid模式APP。

原文链接地址：https://www.arayzou.com/2015/08/24/%E7%A7%BB%E5%8A%A8%E7%AB%AFH5%E6%BB%9A%E5%8A%A8%E7%A9%BF%E9%80%8F%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/

转载于:https://www.cnblogs.com/alphafly/p/6000309.html