我想让我的身体在使用鼠标滚轮时停止滚动,而我的网站上的Modal(来自http://twitter.github.com/bootstrap)是打开的。

当模式被打开时,我试图调用下面的javascript片段,但没有成功

$(window).scroll(function() { return false; });

AND

$(window).live('scroll', function() { return false; });

请注意,我们的网站放弃了对IE6的支持,IE7+需要兼容。


当前回答

为我工作

$('#myModal').on({'mousewheel': function(e) 
    {
    if (e.target.id == 'el') return;
    e.preventDefault();
    e.stopPropagation();
   }
});

其他回答

当你在另一个模态中使用一个模态时,就会发生上述情况。当我在另一个模态中打开一个模态时,后者的关闭将从主体中移除类modal-open。这个问题的解决取决于你如何关闭后一个模式。

如果你用html关闭模态,

<button type="button" class="btn" data-dismiss="modal">Close</button>

然后你必须像这样添加一个监听器,

$(modalSelector).on("hidden.bs.modal", function (event) {
    event.stopPropagation();
    $("body").addClass("modal-open");
    return false;
});

如果你用javascript关闭模态,

$(modalSelector).modal("hide");

然后你必须在一段时间后像这样运行命令,

setInterval(function(){$("body").addClass("modal-open");}, 300);

你可以试着设置body size为window size, overflow:当modal打开时隐藏

我对这段代码不太确定,但值得一试。

jQuery:

$(document).ready(function() {
    $(/* Put in your "onModalDisplay" here */)./* whatever */(function() {
        $("#Modal").css("overflow", "hidden");
    });
});

就像我之前说过的,我不是百分百确定,但还是试一试吧。

我不是100%确定这将与Bootstrap一起工作,但值得一试-它与momodar .js一起工作,可以在github上找到:http://vodkabears.github.io/remodal/,它将有意义的方法非常相似。

为了阻止页面跳转到顶部,也防止内容右移,在模态触发时向主体添加一个类,并设置以下CSS规则:

body.with-modal {
    position: static;
    height: auto;
    overflow-y: hidden;
}

位置:静态和高度:自动结合起来阻止内容向右跳转。overflow-y:隐藏;停止页面在模态后面可滚动。

最好的解决方案是大多数答案所使用的css-only body{overflow:hidden}解决方案。一些答案提供了一个修复,也防止“跳跃”造成的消失滚动条;然而,没有一个太优雅。我写了这两个函数,它们看起来工作得很好。

var $body = $(window.document.body);

function bodyFreezeScroll() {
    var bodyWidth = $body.innerWidth();
    $body.css('overflow', 'hidden');
    $body.css('marginRight', ($body.css('marginRight') ? '+=' : '') + ($body.innerWidth() - bodyWidth))
}

function bodyUnfreezeScroll() {
    var bodyWidth = $body.innerWidth();
    $body.css('marginRight', '-=' + (bodyWidth - $body.innerWidth()))
    $body.css('overflow', 'auto');
}

查看jsFiddle的使用情况。