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

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

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

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

AND

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

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

当前回答

这招对我很管用:

$("#mymodal").mouseenter(function(){
   $("body").css("overflow", "hidden"); 
}).mouseleave(function(){
   $("body").css("overflow", "visible");
});

2013-04-23 19:28:48

其他回答

如果modal的高度/宽度为100%，“mouseenter/leave”可以很容易地启用/禁用滚动。这对我来说真的很管用:

var currentScroll=0;
function lockscroll(){
    $(window).scrollTop(currentScroll);
} 
$("#myModal").mouseenter(function(){
    currentScroll=$(window).scrollTop();
    $(window).bind('scroll',lockscroll); 
}).mouseleave(function(){
    currentScroll=$(window).scrollTop();
    $(window).unbind('scroll',lockscroll); 
});

2016-02-07 23:24:06

不能让它在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

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

我有一个边栏，是由复选框黑客生成的。但主要思想是保存文档scrollTop，而不是在滚动窗口期间更改它。

我只是不喜欢页面跳转时，身体变成'溢出:隐藏'。

2016-12-21 13:05:01

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

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

这是一把能用的小提琴

2021-12-03 16:26:56

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

推荐文章

最新文章

标签