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

Question

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

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

据我所知。我可以通过 'overflow' 关键字处理 CSS 的滚动。我的策略是

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

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

我找到了一些文章，如果我使用 'overflow'，它可能会导致如下问题 link。

Website will not scroll on mobile devices

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

谢谢 :D

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

我在原始 post 之后尝试过的东西。

添加 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 变量切换为 disable/enable 滚动。

Answer 2

我找到方法了:D

一切都是为了 CSS。我发现了一个 post（请理解我，我没有 link 因为它不是用英文写的）它说在移动环境浏览器中自动阻止 overflow 属性。

所以如果你想在移动端使用overflow，你应该添加一行CSS -webkit-overflow-scrolling : touch;。我已将其添加到 body 元素中，如下所示。

.body {
  -webkit-overflow-scrolling: touch;
}

希望这对像我这样的人有帮助 :)

2015 年 4 月 27 日添加

关于这个的悲伤消息。上面的代码只适用于 iPhone4。在 iPhone5 等最近的模型中，进一步不起作用。用户仍然无法滚动弹出窗口的内容 div 但只能滚动背景：<

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

How could I handle scroll on webpage and mobile browser?

jquery

html

css

scroll

mobile-browser