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

Question

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

• 想滚动div弹出窗口，而背景忽略滚动
• 也想在移动设备上做到这一点。

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

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

这在网络浏览器中有效。 但是，当我在移动浏览器上尝试此操作时，它的工作方式却相反。

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

网站无法在移动设备上滚动

这个问题有解决方案吗？ 如果我应该删除“溢出”，应该用什么代替？

感谢：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变量以禁用/启用滚动。

Answer 2

我找到了方法：D

都是关于CSS的。 我找到了一篇帖子（请理解我，因为它不是用英语写的，所以没有链接），该帖子说在移动环境中浏览器会自动阻止overflow属性。

因此，如果要在移动设备中使用overflow ，则应添加一行CSS -webkit-overflow-scrolling : touch; 。 我已将其添加到如下所示的body元素中。

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

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

• 新增2015年4月27日

令人遗憾的消息。 上面的代码仅适用于iPhone4。 在像iPhone5这样的最新型号中，进一步无法使用。 用户仍然不能滚动弹出div的内容，而只能滚动背景：<