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

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

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

AND

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

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


当前回答

这是

body.modal-open {
   overflow: hidden !important;
}

其他回答

因为对我来说,这个问题主要出现在iOS上,所以我提供了只在iOS上修复的代码:

  if(!!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform)) {
    var $modalRep    = $('#modal-id'),
        startScrollY = null, 
        moveDiv;  

    $modalRep.on('touchmove', function(ev) {
      ev.preventDefault();
      moveDiv = startScrollY - ev.touches[0].clientY;
      startScrollY = ev.touches[0].clientY;
      var el = $(ev.target).parents('#div-that-scrolls');
      // #div-that-scrolls is a child of #modal-id
      el.scrollTop(el.scrollTop() + moveDiv);
    });

    $modalRep.on('touchstart', function(ev) {
      startScrollY = ev.touches[0].clientY;
    });
  }

我必须设置视口高度才能让它完美工作

body.modal-open {
  height: 100vh;
  overflow: hidden;
}

Bootstrap的模态在模态对话框显示时自动将类modal-open添加到主体,并在对话框隐藏时将其删除。因此,您可以在CSS中添加以下内容:

body.modal-open {
    overflow: hidden;
}

你可能会说上面的代码属于Bootstrap CSS代码库,但这是一个简单的修复,可以将它添加到你的网站。

2013年2月8日更新 这在Twitter Bootstrap v. 2.3.0中已经停止工作——他们不再向主体添加modal-open类。

一个变通的方法是在模态即将显示时将类添加到主体中,并在模态关闭时将其删除:

$("#myModal").on("show", function () {
  $("body").addClass("modal-open");
}).on("hidden", function () {
  $("body").removeClass("modal-open")
});

2013年3月11日更新 看起来modal-open类将在Bootstrap 3.0中返回,显式地用于防止滚动:

在body上重新引入。modal-open(这样我们就可以把滚动移到这里)

看这个:https://github.com/twitter/bootstrap/pull/6342 -看Modal部分。

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

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

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

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

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

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

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