手機端禁止滾動,滾動穿透的解決方案

移動端fixed彈窗滾動穿透解決方案

在手機端會遇到各種惱人的問題,其中一個就是滾動穿透,真讓人崩潰

1) 錯誤的方案:

一開始我想的是在body上加height:100%;overflow:hidden,在電腦上試了試,欣喜沒問題,然后在手機上又試了一試,md沒有作用,然后各種調各種崩潰,
不過總算弄出了一個幾乎完美的解決方案

2) 幾乎完美的解決方案

在body中另外加一個div,在div上加上overflow等屬性,以下是代碼

banBodyScroll: function (ban) {
    var s = $('body>div');

    if (ban) {
        window.lastScrollTop = $("body").scrollTop();
        console.log(window.lastScrollTop)
        s.css("height", "100%");
        s.css("overflow", "hidden");
    } else {
        s.css("height", "auto");
        s.css("overflow", "auto");
        $("body").scrollTop(window.lastScrollTop);
    }
}

可以看到我還加上了恢復滾動位置的代碼.
為什么說他幾乎完美呢? 因為他在安卓上運行良好,但在iso上在fixed中的滾動會有一點不流暢,在一定程度上有影響體驗

3) 完美的解決方案

暫無以后萬一遇到了就寫. 也待大神告訴我,Ths.