Question

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

想要在背景忽略滚动时滚动div弹出
也想在手机上这样做。

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

当弹出显示属性在块中转动时，然后调用$('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变量以禁用/启用滚动。

Answer 2

我找到了方法：D

这完全是关于CSS的。我发现了一个帖子（请理解我，我没有链接，因为它不是用英文写的），这说明在移动环境中浏览器会自动阻止overflow属性。

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

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

我希望这能帮助像我这样的人：）

2015年4月27日新增

关于此事的悲伤消息。上面的代码仅适用于iPhone4。在最近的模型像iPhone5，进一步无法正常工作。用户仍然不能滚动弹出div的内容，只能滚动背景：＆lt;

我怎么能处理网页和移动浏览器上的滚动？

2 个答案: