本篇文章给大家带来的内容是关于移动端下弹框禁止背景滑动的实现方法介绍（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
茴字写法有很多种，找到最适合的才是好的。
以下下方法在一屛之内是可行的
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');
优点
没有上述这些问题
随带解决了ios fixed 的相关bug
缺点
需要改页面结构
css代码微多
以上就是移动端下弹框禁止背景滑动的实现方法介绍（附代码）的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1612858.html
微信扫一扫 
支付宝扫一扫 
