移動端下彈框禁止背景滑動

baukh789 發布于2019-08-02 11:50 / 2570人閱讀

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

移動端下彈框禁止背景滑動

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

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

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

優點

沒有上述這些問題

隨帶解決了ios fixed 的相關bug

缺點

需要改頁面結構

css代碼微多

云服務器 GPU云服務器下彈框 js彈框禁止滾動 js?移動端滑動無法禁止移動窗口

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53155.html

移動端下彈框禁止背景滑動

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

pf_miles 2019-08-29 17:04 評論0 收藏0
618購物節來襲，電商陪你浪浪浪

摘要：導航欄導航欄用的組件，設置其水平方向滑動，點擊到的字體會變換樣式。而且，導航欄點擊不同的類別會將主頁替換成不同的結構，這就要將最開始的主頁結構隱藏起來。前言購物節又要來啦！！（撒花撒花！）零食打折啦！！衣服打折了！！小伙伴們準備好買買買了嗎！！！讓我看看我還多少余額哈！（滿心期待(*￣︶￣)）（10秒后......）好吧我還是寫個電商小程序過過癮好了。[冷漠臉]咳咳，讓我們進入正題...

selfimpr 2019-08-29 15:42 評論0 收藏0
618購物節來襲，電商陪你浪浪浪

摘要：導航欄導航欄用的組件，設置其水平方向滑動，點擊到的字體會變換樣式。而且，導航欄點擊不同的類別會將主頁替換成不同的結構，這就要將最開始的主頁結構隱藏起來。前言購物節又要來啦！！（撒花撒花！）零食打折啦！！衣服打折了！！小伙伴們準備好買買買了嗎！！！讓我看看我還多少余額哈！（滿心期待(*￣︶￣)）（10秒后......）好吧我還是寫個電商小程序過過癮好了。[冷漠臉]咳咳，讓我們進入正題...

hellowoody 2019-08-22 18:00 評論0 收藏0
618購物節來襲，電商陪你浪浪浪

摘要：導航欄導航欄用的組件，設置其水平方向滑動，點擊到的字體會變換樣式。而且，導航欄點擊不同的類別會將主頁替換成不同的結構，這就要將最開始的主頁結構隱藏起來。前言購物節又要來啦！！（撒花撒花！）零食打折啦！！衣服打折了！！小伙伴們準備好買買買了嗎！！！讓我看看我還多少余額哈！（滿心期待(*￣︶￣)）（10秒后......）好吧我還是寫個電商小程序過過癮好了。[冷漠臉]咳咳，讓我們進入正題...

MarvinZhang 2019-08-02 10:41 評論0 收藏0