Question

我试图阻止用户在其上显示模式时滚动父窗口。

当用户在iPad上查看模式时，当他们点击并拖动内容div或模式内的滚动条时会出现问题，然后滚动它下面的（父）页面。

我认为一旦打开模态，我可以在body标签或主容器中添加一些css，通过给它一个溢出来禁用滚动：隐藏;并在模态关闭后将其移除。欢迎任何建议，谢谢。

<html>
<body>
  <a href="#" class="open-modal">Open modal</a>
  <div class="modal">Content</div>
</body>
</html>

更新：我使用此http://www.bcreatives.com.au/blog/enabledisable-scrolling-in-iphoneipads-safari-browser.html在iOS设备上禁用它，并添加了overflow：hidden;在用户关闭模态时将其移除并移除。

Answer 1

你可以在body上添加overflow:hidden;或任何具有此属性的classname，以便在显示modal时剪切内容，并在隐藏modal时删除css / class。

html, body{height:100%}
.customClass{overflow:hidden;}

Answer 2

您可以使用以下代码阻止mousewheel列表器执行

当模态打开时：

$('body').on('wheel.modal mousewheel.modal', function () {return false;});

当模态关闭时：

$('body').off('wheel.modal mousewheel.modal');