成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

移動(dòng)端下彈框禁止背景滑動(dòng)

pf_miles / 2849人閱讀

摘要：移動(dòng)端下彈框禁止背景滑動(dòng)茴字寫法有很多種，找到最適合的才是好的。

移動(dòng)端下彈框禁止背景滑動(dòng) 
茴字寫法有很多種，找到最適合的才是好的。

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

body;html 設(shè)置overflow:hidden 
.overflow-hidden{
    height: 100%;
    overflow: hidden;
}

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

// 隱藏時(shí)
$("html, body,.page").removeClass("overflow-hidden");
問題

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

保存scrollTop，再設(shè)置scrollTo 
var top = $(window).scrollTop();
// 彈出時(shí)
$("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)容超出一屛時(shí)，彈框背景頁面會(huì)自動(dòng)滾動(dòng)到頂部，無法回到原來彈框所在的位置

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

綁定touchmove事件，然后調(diào)用preventDefault() 
function preventDefaultFn(event){
    event.preventDefault();
}

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

// 隱藏時(shí) 遮罩層
$(".modal-overlay").off("touchmove", preventDefaultFn);
問題

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

解決

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

給main元素添加position:absolute(推薦) 
.page {
     /* main絕對(duì)定位，進(jìn)行內(nèi)部滾動(dòng) */
    position: absolute;
    top: 0;
    bottom: 0;
    right:0;
    left:0;
    /* 使之可以滾動(dòng) */
    overflow-y: scroll;
    /* 增加該屬性，可以增加彈性 */
    -webkit-overflow-scrolling: touch;
}
.overflow-hidden{
    overflow: hidden;
}

// 彈出時(shí)
$(".page").addClass("overflow-hidden");

// 隱藏時(shí)
$(".page").removeClass("overflow-hidden");
優(yōu)點(diǎn)

沒有上述這些問題

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

缺點(diǎn)

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

css代碼微多

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/114085.html

相關(guān)文章

  • 移動(dòng)端下彈框禁止背景滑動(dòng)

    摘要：移動(dòng)端下彈框禁止背景滑動(dòng)茴字寫法有很多種，找到最適合的才是好的。 移動(dòng)端下彈框禁止背景滑動(dòng) 茴字寫法有很多種，找到最適合的才是好的。 以下下方法在一屛之內(nèi)是可行的 body;html 設(shè)置overflow:hidden .overflow-hidden{ height: 100%; overflow: hidden; } // 彈出時(shí) $(html, body,.pa...

    baukh789 評(píng)論0 收藏0

  • 618購物節(jié)來襲，電商陪你浪浪浪

    摘要：導(dǎo)航欄導(dǎo)航欄用的組件，設(shè)置其水平方向滑動(dòng)，點(diǎn)擊到的字體會(huì)變換樣式。而且，導(dǎo)航欄點(diǎn)擊不同的類別會(huì)將主頁替換成不同的結(jié)構(gòu)，這就要將最開始的主頁結(jié)構(gòu)隱藏起來。 前言 購物節(jié)又要來啦！?。ㄈ龌ㄈ龌ǎ。┝闶炒蛘劾玻?！衣服打折了?。⌒』锇閭儨?zhǔn)備好買買買了嗎?。。∽屛铱纯次疫€多少余額哈?。M心期待(*￣︶￣)）（10秒后......）好吧我還是寫個(gè)電商小程序過過癮好了。[冷漠臉]咳咳，讓我們進(jìn)入正題...

    selfimpr 評(píng)論0 收藏0

  • 618購物節(jié)來襲，電商陪你浪浪浪

    摘要：導(dǎo)航欄導(dǎo)航欄用的組件，設(shè)置其水平方向滑動(dòng)，點(diǎn)擊到的字體會(huì)變換樣式。而且，導(dǎo)航欄點(diǎn)擊不同的類別會(huì)將主頁替換成不同的結(jié)構(gòu)，這就要將最開始的主頁結(jié)構(gòu)隱藏起來。 前言 購物節(jié)又要來啦?。。ㄈ龌ㄈ龌ǎ。┝闶炒蛘劾玻?！衣服打折了??！小伙伴們準(zhǔn)備好買買買了嗎！??！讓我看看我還多少余額哈?。M心期待(*￣︶￣)）（10秒后......）好吧我還是寫個(gè)電商小程序過過癮好了。[冷漠臉]咳咳，讓我們進(jìn)入正題...

    hellowoody 評(píng)論0 收藏0

  • 618購物節(jié)來襲，電商陪你浪浪浪

    摘要：導(dǎo)航欄導(dǎo)航欄用的組件，設(shè)置其水平方向滑動(dòng)，點(diǎn)擊到的字體會(huì)變換樣式。而且，導(dǎo)航欄點(diǎn)擊不同的類別會(huì)將主頁替換成不同的結(jié)構(gòu)，這就要將最開始的主頁結(jié)構(gòu)隱藏起來。 前言 購物節(jié)又要來啦?。。ㄈ龌ㄈ龌ǎ。┝闶炒蛘劾玻。∫路蛘哿耍?！小伙伴們準(zhǔn)備好買買買了嗎?。。∽屛铱纯次疫€多少余額哈?。M心期待(*￣︶￣)）（10秒后......）好吧我還是寫個(gè)電商小程序過過癮好了。[冷漠臉]咳咳，讓我們進(jìn)入正題...

    MarvinZhang 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

pf_miles

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<