移動端下彈框禁止背景滑動的實作方法介紹（附代碼）-css教學-PHP中文網

這篇文章帶給大家的內容是關於行動端下彈框禁止背景滑動的實作方法介紹（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

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

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

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');

登入後複製