茴字写法有很多种，找到最适合的才是好的。以下下方法在一屛之内是可行的
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代码微多
以上就是移动端下弹框禁止背景滑动的实现方法介绍（附代码）的详细内容。