jquery - 我如何处理网页和移动浏览器上的滚动？

Question

我正在尝试建立一个网站。客户的要求如下。

• 想要滚动 div 弹出窗口而背景忽略滚动
• 也想在移动设备上执行此操作。

据我所知。我可以通过“溢出”关键字使用 CSS 处理滚动。我的策略是

• 当popup显示属性变成block时，调用$('body').css('overflow', 'hidden')。
• 当 popup display 属性变为 none 时，调用 $('body').css('overflow', 'auto')。

这适用于网络浏览器。然而，当我在移动浏览器上尝试这个时，它以相反的方式工作。

我找到了一些文章，如果我使用“溢出”，它可能是导致问题的原因，如下面的链接。

Website will not scroll on mobile devices

这个问题有解决办法吗？如果我应该删除“溢出”，我应该用什么替换它？

谢谢:D

================================

我在原始帖子后尝试过的事情。

添加 javascript(4 月 22 日)

function toggleBackgroundScroll(){
    var cur = $('body').css('overflow');
    if(cur == null || typeof cur == 'undefined') cur = 'auto';

    if(cur != 'hidden'){
        //scroll, auto 
        //when div popup showed up 
        $('body').css('overflow', 'hidden');
        $('body').on('touchmove', function(e){
            //below alert works!
            //alert('touchmove prevent!');
            e.preventDefault();
        });
    }else{
        //hidden
        //when div pop up is disabled. 
        $('body').css('overflow', 'auto');
        $('body').on('touchmove', function(e){
        });
    }
}

感谢您的评论。(kevinAlbs) 但它仍然以相反的方式工作。无法滚动弹出内容，但背景可滚动。

Answer 1

在移动浏览器上，我幸运地阻止了 ontouchmove 事件的默认操作。即

$("body").on("touchmove", function(e){
    if(modalOpen) { 
       e.preventDefault(); //disables scrolling on mobile only
    }
}

然后切换 modalOpen 变量以禁用/启用滚动。