移动端弹框写分的方式有很多种,最好找到最合适的。以下方法在体内是可行的;html设置溢出:hidden.overflow-hidden{height:100%;overflow:hidden;}//弹出时$('html,body,.page').addClass('overflow-hidden');//隐藏时$('html,body,.page').removeClass('溢出隐藏');问题当body内容超过一页时,弹框的背景页会自动滚动到顶部,无法回到弹框原来的位置保存scrollTop,然后设置scrollTovartop=$(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内容超过一个宽度时,弹框背景页面会自动滚动到顶部,无法回到弹框原来的位置。页面发生顶部和页面滚动;页面会闪烁的情况下绑定touchmove事件,然后调用preventDefault()函数preventDefaultFn(event){event.preventDefault();}//弹出时的遮罩层$('.modal-overlay').on('touchmove',preventDefaultFn);//隐藏时,遮罩层$('.modal-overlay').off('touchmove',preventDefaultFn);问题是弹框里面还有滚动的内容,滚动的内容不能滚动解决弹框里面的问题给需要滚动的元素添加标签,判断是否执行event.preventDefault();添加position:absolute(推荐)到mainelement.page{/*main绝对定位,内部滚动*/position:absolute;顶部:0;底部:0;右:0;左:0;/*使其可滚动*/overflow-y:scroll;/*增加该属性增加弹性*/-webkit-overflow-scrolling:touch;}.overflow-hidden{overflow:hidden;}//弹出时$('.page').addClass('overflow-hidden');//隐藏时$('.page').removeClass('overflow-hidden');
