手机端禁止滚动,滚动穿透的解决方案

移动端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.

转载于:https://www.cnblogs.com/bysir/p/5787619.html