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

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

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

AND

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

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


当前回答

在StackOverflow上做了8-10个小时的研究后,我找到了一个可行的解决方案。

突破

$('.modal').is(':visible');

因此,我已经构建了一个函数来检查是否有任何模态是打开的,它将定期添加类*modal-open**到

 setInterval(function()
     {
         if($('.modal').is(':visible')===true)
         {
             $("body").addClass("modal-open");
         }
         else
         {
             $("body").removeClass("modal-open");
         }

     },200);

这里使用$(".modal")的原因是所有的模态(在Bootstrap中)都使用类modal (fade/show是根据状态而定)

所以我的模态现在运行完美没有身体得到滚动。

这在GitHub中也是一个bug/闻所未闻的问题,但没有人打扰。

其他回答

试试这个:

.modal-open {
    overflow: hidden;
    position:fixed;
    width: 100%;
    height: 100%;
}

这对我很管用。(支持IE8)

以上的答案都不适合我。所以我找到了另一种行之有效的方法。

只需添加一个scroll.(命名空间)监听器,并将文档的scrollTop设置为它的最新值…

并在关闭脚本中删除侦听器。

// in case of bootstrap modal example:
$('#myModal').on('shown.bs.modal', function () {
  
  var documentScrollTop = $(document).scrollTop();
  $(document).on('scroll.noScroll', function() {
     $(document).scrollTop(documentScrollTop);
     return false;
  });

}).on('hidden.bs.modal', function() {

  $(document).off('scroll.noScroll');

});

更新

似乎,这不是很好地工作在chrome。有什么建议吗?

不幸的是,上面的答案没有一个能解决我的问题。

在我的情况下,网页原本有一个滚动条。每当我点击模态,滚动条不会消失,标题会向右移动一点。

然后我尝试添加.modal-open{overflow:auto;}(大多数人都推荐)。它确实解决了问题:滚动条出现后,我打开模式。然而,另一个副作用出现了,那就是“标题下面的背景会向左移动一点,在模态后面还有一个长条”

幸运的是,在添加{padding-right: 0 !important;}之后,一切都被完美地修复了。标题和正文背景都没有移动,模态仍然保持滚动条。

希望这可以帮助那些仍然被这个问题困扰的人。好运!

当你在另一个模态中使用一个模态时,就会发生上述情况。当我在另一个模态中打开一个模态时,后者的关闭将从主体中移除类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);

许多人建议在正文上使用“overflow: hidden”,这是行不通的(至少在我的情况下不是),因为它会让网站滚动到顶部。

这是适用于我的解决方案(手机和电脑),使用jQuery:

    $('.yourModalDiv').bind('mouseenter touchstart', function(e) {
        var current = $(window).scrollTop();
        $(window).scroll(function(event) {
            $(window).scrollTop(current);
        });
    });
    $('.yourModalDiv').bind('mouseleave touchend', function(e) {
        $(window).off('scroll');
    });

这将使模式的滚动工作,并防止网站在同一时间滚动。