移動端下彈框禁止背景滑動的實作方法介紹（附代碼）

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

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

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

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程式碼微多

#

以上是移動端下彈框禁止背景滑動的實作方法介紹（附代碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！