实现移动端下弹框禁止背景滑动的案例

　　介绍

这篇文章主要介绍了实现移动端下弹框禁止背景滑动的案例,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。


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

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

身体;html设置溢出:隐藏

.overflow-hidden { 　　高度:100%; 　　溢出:隐藏; 　　}//弹出时 　　美元(& # 39;html,身体,.page& # 39;) .addClass (& # 39; overflow-hidden& # 39;);//隐藏时 　　$ (& # 39;html,身体,.page& # 39;) .removeClass (& # 39; overflow-hidden& # 39;);

问题

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

<强>保存scrollTop,再设置scrollTo

var顶级=$(窗口).scrollTop ();//弹出时 　　$(“身体.page") . css ({ 　　“position":“fixed" 　　“top":最高, 　　“left": 0, 　　“right": 0, 　　“bottom": 0 　　}),//隐藏式 　　$(“身体.page") . css ({ 　　“position":“static" 　　}); 　　$ (“html") . css ({ 　　“scroll-behavior":“unset" 　　}); 　　$(窗口).scrollTop(上), 　　$ (“html") . css ({ 　　“scroll-behavior":“smooth" 　　});

问题

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

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

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

函数preventDefaultFn(事件){ 　　event.preventDefault (); 　　}//弹出时遮罩层 　　美元(& # 39;.modal-overlay& # 39;)内(& # 39;touchmove& # 39;, preventDefaultFn);//隐藏时遮罩层 　　$ (& # 39;.modal-overlay& # 39;) .off (& # 39; touchmove& # 39;, preventDefaultFn);

问题

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

解决

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

<强>给主元素添加位置:绝对(推荐)

。页面{/*主绝对定位,进行内部滚动*/位置:绝对的; 　　上图:0; 　　底部:0; 　　右:0; 　　左:0;/*使之可以滚动*/overflow-y:滚动;/*增加该属性,可以增加弹性*/-webkit-overflow-scrolling:触摸; 　　} 　　.overflow-hidden { 　　溢出:隐藏; 　　}//弹出时 　　美元(& # 39;.page& # 39;) .addClass (& # 39; overflow-hidden& # 39;);//隐藏时 　　美元(& # 39;.page& # 39;) .removeClass (& # 39; overflow-hidden& # 39;); 　　& lt; div类=皃age"祝辞 　　& lt; !——内容在这里……——比; 　　& lt;/div>

优点

没有上述这些问题

随带解决了ios固定的相关虫

缺点

需要改页面结构

css代码微多

感谢你能够认真阅读完这篇文章,希望小编分享实现移动端下弹框禁止背景滑动的案例内容对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,遇到问题就找,详细的解决方法等着你来学习!

实现移动端下弹框禁止背景滑动的案例