移動端下彈框禁止背景滑動

茴字寫法有很多種，找到最適合的才是好的。

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

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

總結

以上是生活随笔為你收集整理的移动端下弹框禁止背景滑动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。