popup - 如何将鼠标滚动限制为模态？

Question

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

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

Answer 1

To achieve this I used the "show" and "hide" events of the modal. I'm using Twitter Bootstrap modal so they have these events, but I guess any good modal plugin will have them. For the "show" event, I binded a function that removes scrolling on the body. For the "hide" event, I binded a function that reenables it. Here's how I did it:

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

You can of course disable/enable scrolling on the container of your choice. Hope this helps.