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

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

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

AND

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

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


当前回答

许多人建议在正文上使用“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');
    });

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

其他回答

简单地隐藏身体溢出,它使身体不滚动。隐藏模式时,将其恢复为自动模式。

代码如下:

$('#adminModal').modal().on('shown', function(){
    $('body').css('overflow', 'hidden');
}).on('hidden', function(){
    $('body').css('overflow', 'auto');
})

添加类'is-modal-open'或用javascript修改body标签的样式都是可以的,它会像预期的那样工作。但我们要面对的问题是当body变成overflow:hidden时,它会跳到顶部(scrollTop将变成0)。这将在以后成为一个可用性问题。

作为这个问题的解决方案,而不是改变正文标签溢出:隐藏改变它在html标签

$('#myModal').on('shown.bs.modal', function () {
  $('html').css('overflow','hidden');
}).on('hidden.bs.modal', function() {
  $('html').css('overflow','auto');
});

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

只需添加一个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。有什么建议吗?

我对Bootstrap 3的解决方案:

.modal {
  overflow-y: hidden;
}
body.modal-open {
  margin-right: 0;
}

因为对我来说唯一的溢出:隐藏在身上。模态打开类并没有阻止页面向左移动,因为原始的右距:15px。

试试这个:

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

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