当模式打开时，防止BODY滚动

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

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

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

AND

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

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

当前回答

不能让它在Chrome上工作，只是通过改变CSS，因为我不想让页面滚动回顶部。这很有效:

$("#myModal").on("show.bs.modal", function () {
  var top = $("body").scrollTop(); $("body").css('position','fixed').css('overflow','hidden').css('top',-top).css('width','100%').css('height',top+5000);
}).on("hide.bs.modal", function () {
  var top = $("body").position().top; $("body").css('position','relative').css('overflow','auto').css('top',0).scrollTop(-top);
});

2013-10-29 20:01:27

其他回答

这个解决方案对我很有效:

基本上，当打开模态时，它会为主体添加一个负顶部，以在打开模态之前保持窗口滚动位置。关闭模态时，窗口滚动保持使用相同的值应用于顶部时，打开。这种方法可以防止身体滚动。

这是一把能用的小提琴

2021-12-03 16:26:56

不能让它在Chrome上工作，只是通过改变CSS，因为我不想让页面滚动回顶部。这很有效:

$("#myModal").on("show.bs.modal", function () {
  var top = $("body").scrollTop(); $("body").css('position','fixed').css('overflow','hidden').css('top',-top).css('width','100%').css('height',top+5000);
}).on("hide.bs.modal", function () {
  var top = $("body").position().top; $("body").css('position','relative').css('overflow','auto').css('top',0).scrollTop(-top);
});

2013-10-29 20:01:27

我使用这个香草js函数添加“模态打开”类的身体。(根据smhmic的回答)

function freezeScroll(show, new_width)
{
    var innerWidth = window.innerWidth,
        clientWidth = document.documentElement.clientWidth,
        new_margin = ((show) ? (new_width + innerWidth - clientWidth) : new_width) + "px";

    document.body.style.marginRight = new_margin;
    document.body.className = (show) ? "modal-open" : "";
};

2014-10-23 17:17:36

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

2012-03-02 19:05:22

最好的解决方案是大多数答案所使用的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的使用情况。

2013-08-29 02:55:38

当模式打开时，防止BODY滚动

推荐文章

最新文章

标签