移动端下弹框禁止背景滑动的实现方法介绍(附代码)

如果下载的源码需要作者授权,请更换源码。本站免费分享资源不会增加授权

本篇文章给大家带来的内容是关于移动端下弹框禁止背景滑动的实现方法介绍(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

茴字写法有很多种,找到最适合的才是好的。

以下下方法在一屛之内是可行的

body;html 设置overflow:hidden

.overflow-hidden{     height: 100%;     overflow: hidden; }  // 弹出时 $('html, body,.page').addClass('overflow-hidden');  // 隐藏时 $('html, body,.page').removeClass('overflow-hidden');

问题

当body内容超出一屛时,弹框背景页面会自动滚动到顶部,无法回到原来弹框所在的位置

保存scrollTop,再设置scrollTo

var top = $(window).scrollTop(); // 弹出时 $("body .page").css({     "position": "fixed",     "top": -top,     "left": 0,         "right": 0,         "bottom": 0 }),  // 隐藏式 $("body .page").css({     "position": "static" }); $("html").css({     "scroll-behavior": "unset" }); $(window).scrollTop(top), $("html").css({     "scroll-behavior": "smooth" });

问题

当body内容超出一屛时,弹框背景页面会自动滚动到顶部,无法回到原来弹框所在的位置

页面发生了 top 和页面滚动;页面会有闪烁的情况

绑定touchmove事件,然后调用preventDefault()

function preventDefaultFn(event){     event.preventDefault(); }  // 弹出时 遮罩层 $('.modal-overlay').on('touchmove', preventDefaultFn);  // 隐藏时 遮罩层 $('.modal-overlay').off('touchmove', preventDefaultFn);

问题

弹框中还有滚动的内容,滚动内容也无法滚动

解决

给弹框内需滚动的元素添加标记,在判断是否执行event.preventDefault();

给main元素添加position:absolute(推荐)

.page {      /* main绝对定位,进行内部滚动 */     position: absolute;     top: 0;     bottom: 0;     right:0;     left:0;     /* 使之可以滚动 */     overflow-y: scroll;     /* 增加该属性,可以增加弹性 */     -webkit-overflow-scrolling: touch; } .overflow-hidden{     overflow: hidden; } // 弹出时 $('.page').addClass('overflow-hidden'); // 隐藏时 $('.page').removeClass('overflow-hidden'); <div class="page">     <!-- 内容在这里... --> </div>

优点

没有上述这些问题

随带解决了ios fixed 的相关bug

缺点

需要改页面结构

css代码微多

本文由(壳先生)整理自网络,如转载请注明出处:https://www.mrshell.com;
本站发布的内容若侵犯到您的权益,请邮件联系 i@mrshell.com 删除,我们将及时处理!
===========================================================================

1. 本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。
2. 本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
4. 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

=================================================================

壳先生 » 移动端下弹框禁止背景滑动的实现方法介绍(附代码)

发表评论

提供最优质的资源集合

立即查看 了解详情