当模态打开时禁用触摸滚动

时间:2014-12-18 02:18:01

标签: javascript css twitter-bootstrap mobile responsive-design

我在手机上的网站上使用全屏模式。问题是触摸模态将导致正文页面移动,即使它溢出:隐藏;

以下是bootstrap对此的说法:

  

支持溢出:隐藏在元素上的内容非常有限   iOS和Android。为此,当您滚过顶部或底部时   在这些设备的浏览器中的模式,内容   将开始滚动。

我该怎么做才能防止这种情况?

将主体设置为position:fixed会导致滚动以丑陋的方式跳到顶部。如果有人提出一个最好的解决方案是什么?

1 个答案:

答案 0 :(得分:1)

我之前有同样的问题。

我所做的是将正文更改为overflow:hidden并将height修改为等于模态height,并记住文档滚动位置。关闭模式后,我已将记住的滚动位置应用于heightauto

这是如此复杂,因为我需要我的模态比窗口大,我希望能够滚动模态。