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

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

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代码微多

以上就是移动端下弹框禁止背景滑动的实现方法介绍（附代码）的详细内容，更多内容请关注技术你好其它相关文章！