移动端页面滚动穿透问题解决方案
问题描述
最近在做移动项目时遇到一个页面滚动穿透问题,具体场景是这样的,在一个可滚动的列表页中打开弹窗,底部的页面理论上是不可滚动的,但是当滑动弹窗时,底部页面会跟随滚动,这就是所谓的页面滚动穿透的问题。这个是比较常见的问题,基本都会遇到,Google一下出解决方案也是挺多的。以下根据不同的适用场景总结一些解决方案:
方案一:overflow:hidden
在列表容器的父元素上设置样式overflow:hidden来禁用滚动
.alpha {
height: 100%;
overflow: hidden;
}
.alpha body {
height: 100%;
overflow: hidden;
}
当弹出蒙层的时候,可以添加底部页面HTML标签的class,取消蒙层时则删除class
$('html').addClass('alpha');
$('html').removeClass('alpha');
缺点:
当弹出蒙层时,禁用了html和body的滚动条,滚动列表的滚动位置会丢失,会重置到没有滚动的状态,需要js进行还原。
手机扫码查看效果:
查看DEMO
1、未滚动时弹出蒙层,底部列表会被禁用滚动
2、滚动后再弹出蒙层,滚动位置会丢失,重置到无滚动的位置
方案二:阻止touchmove默认事件
通过阻止弹窗的touchmove默认事件禁用滚动实现
代码实现:
var modal = document.getElementById('modal'); // 弹窗dom对象
modal.addEventListener('touchmove', function(e) {
e.preventDefault();
}, false);
缺点
弹窗中里不能有其它需要滚动的内容,如大段文字需要固定高度,显示滚动条也会被阻止。
手机扫码查看效果:
查看DEMO
方案三:position: fixed
设置列表容器元素为positon:fixed
代码实现:
.alpha.body{
position:fixed;
width:100%;
}
缺点:
这种方法同样有以上两种方法的缺点,滚动列表的滚动位置会丢失,会重置到没有滚动的状态,通过js获取滚动条位置,调整位置即可。
打开弹窗时则在body元素上添加class
手机扫码查看效果:
查看DEMO
更多阅读
作者:GeniusLyzh
出处:http://www.cnblogs.com/GeniusLyzh/
本文链接:https://www.cnblogs.com/GeniusLyzh/p/5808446.html
本文版权归作者和博客园共有,欢迎转载,须保留此段声明,并给出原文链接,谢谢!
如果阅读了本文章,觉得有帮助,欢迎点击右下角推荐
出处:http://www.cnblogs.com/GeniusLyzh/
本文链接:https://www.cnblogs.com/GeniusLyzh/p/5808446.html
本文版权归作者和博客园共有,欢迎转载,须保留此段声明,并给出原文链接,谢谢!
如果阅读了本文章,觉得有帮助,欢迎点击右下角推荐
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战