資訊專欄INFORMATION COLUMN
摘要：移動端下彈框禁止背景滑動茴字寫法有很多種，找到最適合的才是好的。
移動端下彈框禁止背景滑動
茴字寫法有很多種，找到最適合的才是好的。
以下下方法在一屛之內(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è)置scrollTovar 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絕對定位，進(jìn)行內(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");
優(yōu)點
沒有上述這些問題
隨帶解決了ios fixed 的相關(guān)bug
缺點需要改頁面結(jié)構(gòu)
css代碼微多
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/53155.html
摘要：移動端下彈框禁止背景滑動茴字寫法有很多種，找到最適合的才是好的。 移動端下彈框禁止背景滑動 茴字寫法有很多種，找到最適合的才是好的。 以下下方法在一屛之內(nèi)是可行的 body;html 設(shè)置overflow:hidden .overflow-hidden{ height: 100%; overflow: hidden; } // 彈出時 $(html, body,.pa...
摘要：導(dǎo)航欄導(dǎo)航欄用的組件，設(shè)置其水平方向滑動，點擊到的字體會變換樣式。而且，導(dǎo)航欄點擊不同的類別會將主頁替換成不同的結(jié)構(gòu)，這就要將最開始的主頁結(jié)構(gòu)隱藏起來。 前言 購物節(jié)又要來啦?。。ㄈ龌ㄈ龌ǎ。┝闶炒蛘劾玻?！衣服打折了！！小伙伴們準(zhǔn)備好買買買了嗎?。。∽屛铱纯次疫€多少余額哈?。M心期待(*￣︶￣)）（10秒后......）好吧我還是寫個電商小程序過過癮好了。[冷漠臉]咳咳，讓我們進(jìn)入正題...
摘要：導(dǎo)航欄導(dǎo)航欄用的組件，設(shè)置其水平方向滑動，點擊到的字體會變換樣式。而且，導(dǎo)航欄點擊不同的類別會將主頁替換成不同的結(jié)構(gòu)，這就要將最開始的主頁結(jié)構(gòu)隱藏起來。 前言 購物節(jié)又要來啦?。。ㄈ龌ㄈ龌ǎ。┝闶炒蛘劾玻。∫路蛘哿耍。⌒』锇閭儨?zhǔn)備好買買買了嗎?。?！讓我看看我還多少余額哈?。M心期待(*￣︶￣)）（10秒后......）好吧我還是寫個電商小程序過過癮好了。[冷漠臉]咳咳，讓我們進(jìn)入正題...
摘要：導(dǎo)航欄導(dǎo)航欄用的組件，設(shè)置其水平方向滑動，點擊到的字體會變換樣式。而且，導(dǎo)航欄點擊不同的類別會將主頁替換成不同的結(jié)構(gòu)，這就要將最開始的主頁結(jié)構(gòu)隱藏起來。 前言 購物節(jié)又要來啦?。。ㄈ龌ㄈ龌ǎ。┝闶炒蛘劾玻。∫路蛘哿耍。⌒』锇閭儨?zhǔn)備好買買買了嗎?。?！讓我看看我還多少余額哈！（滿心期待(*￣︶￣)）（10秒后......）好吧我還是寫個電商小程序過過癮好了。[冷漠臉]咳咳，讓我們進(jìn)入正題...
閱讀 3399·2023-04-26 01:46
閱讀 2927·2023-04-25 20:55
閱讀 5500·2021-09-22 14:57
閱讀 2985·2021-08-27 16:23
閱讀 1723·2019-08-30 14:02
閱讀 2073·2019-08-26 13:44
閱讀 653·2019-08-26 12:08
閱讀 2968·2019-08-26 11:47
