简单模态不滚动背景 <body>答案

【问题标题】：simple modal not scroll background <body>简单模态不滚动背景 <body>
【发布时间】：2012-03-09 18:27:49
【问题描述】：

我正在使用simple modal。当您在模态边界之外滚动鼠标滚轮时，有什么方法可以防止背景（覆盖层后面）滚动？

谢谢！

【问题讨论】：

【解决方案1】：

在创建模式时，为 body 设置 overflow:hidden。然后你将无法滚动背景，隐藏模式时，将overflow:auto设置为body。

【讨论】：

【解决方案2】：

我认为你可以这样做：

$(document).on('mousewheel', '.simplemodal-overlay, .simplemodal-data', function(event) {
    event.preventDefault();
});

不过，我不确定mousewheel 是否有完整的跨浏览器支持。

编辑：我验证了这个工作，但你需要mousewheel插件：https://github.com/brandonaaron/jquery-mousewheel/downloads

（我将jquery.mousewheel.min.js粘贴到脚本区域...不要那样做）

【讨论】：

啊。效果很好。谢谢！问题是模态有几个带有滚动条的框。因此，当您在其中使用鼠标滚轮时，当您点击底部时，背景中的页面仍会滚动。有没有办法修改选择，以便那些滚动工作，而当模式启动时没有其他任何事情？再次感谢！
事实证明这要困难得多，因为mousewheel 不像其他事件那样符合正常的事件冒泡/传播。我还没有想出一个简单的方法来做到这一点。