實現(xiàn)移動端下彈框禁止背景滑動的案例

這篇文章主要介紹了實現(xiàn)移動端下彈框禁止背景滑動的案例，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

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

以下下方法在一屛之內(nèi)是可行的

body;html 設(shè)置overflow:hidden

.overflow-hidden{
    height: 100%;
    overflow: hidden;
}

// 彈出時
$('html, body,.page').addClass('overflow-hidden');

// 隱藏時
$('html, body,.page').removeClass('overflow-hidden');

問題

當(dāng)body內(nèi)容超出一屛時，彈框背景頁面會自動滾動到頂部，無法回到原來彈框所在的位置

保存scrollTop，再設(shè)置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"
});

問題

當(dāng)body內(nèi)容超出一屛時，彈框背景頁面會自動滾動到頂部，無法回到原來彈框所在的位置

頁面發(fā)生了 top 和頁面滾動;頁面會有閃爍的情況

綁定touchmove事件，然后調(diào)用preventDefault()

function preventDefaultFn(event){
    event.preventDefault();
}

// 彈出時 遮罩層
$('.modal-overlay').on('touchmove', preventDefaultFn);

// 隱藏時 遮罩層
$('.modal-overlay').off('touchmove', preventDefaultFn);

問題

彈框中還有滾動的內(nèi)容，滾動內(nèi)容也無法滾動

解決

給彈框內(nèi)需滾動的元素添加標(biāo)記，在判斷是否執(zhí)行event.preventDefault();

給main元素添加position:absolute(推薦)

.page {
     /* main絕對定位，進行內(nèi)部滾動 */
    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">
    <!-- 內(nèi)容在這里... -->
</div>

優(yōu)點

沒有上述這些問題

隨帶解決了ios fixed 的相關(guān)bug

缺點

需要改頁面結(jié)構(gòu)

css代碼微多

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享實現(xiàn)移動端下彈框禁止背景滑動的案例內(nèi)容對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學(xué)習(xí)!