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

Question

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

• 想要滚动div弹出窗口，而背景忽略滚动
• 也想在手机上做这件事

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

• 当弹出显示属性进入块时，调用$('body').css('overflow', 'hidden')
• 当弹出显示属性变为无时，调用$('body').css('overflow', 'auto')

这适用于web浏览器。然而，当我在手机浏览器上尝试这个时，它的工作方式正好相反。

我发现一些文章，如果我使用"溢出"，这可能是下面链接中问题的原因。

网站不会在移动设备上滚动

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

感谢：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 {
-webkit-overflow-scrolling: touch;
}

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

• 添加于2015年4月27日

关于这件事的不幸消息。以上代码仅适用于iPhone4。在最近的型号像iPhone5和进一步不起作用。静态用户不能滚动弹出div的内容，只能滚动背景：<