如何将鼠标滚动限制为模态？答案

【问题标题】：How to restrict mouse scroll to modal?如何将鼠标滚动限制为模态？
【发布时间】：2012-11-27 23:52:17
【问题描述】：

我有一个带有可滚动内容的模式，使用 overflow-y:scroll;

问题是，当使用鼠标滚轮在模态框内滚动并到达内容的末尾时，主页会滚动。我的客户要求我防止这种情况发生。这可能吗？

【问题讨论】：

【解决方案1】：

为了实现这一点，我使用了模式的“显示”和“隐藏”事件。我正在使用 Twitter Bootstrap 模态，所以他们有这些事件，但我想任何好的模态插件都会有它们。对于“显示”事件，我绑定了一个删除正文滚动的函数。对于“隐藏”事件，我绑定了一个重新启用它的函数。我是这样做的：

modal = $('#myModal');
modal.on('show', function () {
    // disable background scrolling
    $('body').css('overflow', 'hidden');
});
modal.on('hide', function () {
    // enable background scrolling
    $('body').css('overflow', 'auto');
});

您当然可以在您选择的容器上禁用/启用滚动。希望这会有所帮助。

【讨论】：