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

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

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

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

AND

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

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

当前回答

为什么不像布尔玛那样做呢? 当modal is-active时，将它们的类.is-clipped添加到html中，即overflow: hidden!important; 就是这样。

编辑:好的，Bulma有这个bug，所以你必须添加其他东西，比如

html.is-modal-active {
  overflow: hidden !important;
  position: fixed;
  width: 100%; 
}

2018-10-19 06:13:00

其他回答

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

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

这是一把能用的小提琴

2021-12-03 16:26:56

接受的答案不工作在手机上(iOS 7 w/ Safari 7，至少)，我不希望MOAR JavaScript运行在我的网站上，当CSS将做。

这个CSS将阻止后台页面在模式下滚动:

body.modal-open {
    overflow: hidden;
    position: fixed;
}

然而，它也有一个轻微的副作用，基本上是滚动到顶部。位置:绝对解决了这个问题，但是，重新引入了在移动设备上滚动的能力。

如果你知道你的视口(我的插件为<body>添加视口)，你可以为这个位置添加一个css切换。

body.modal-open {
    // block scroll for mobile;
    // causes underlying page to jump to top;
    // prevents scrolling on all screens
    overflow: hidden;
    position: fixed;
}
body.viewport-lg {
    // block scroll for desktop;
    // will not jump to top;
    // will not prevent scroll on mobile
    position: absolute; 
}

我还添加了这个，以防止底层页面在显示/隐藏情态动词时左/右跳转。

body {
    // STOP MOVING AROUND!
    overflow-x: hidden;
    overflow-y: scroll !important;
}

这个答案是x-post。

2014-07-13 21:39:51

对于那些想知道如何获得滚动事件的引导3模态:

$(".modal").scroll(function() {
    console.log("scrolling!);
});

2014-06-05 15:25:59

这招对我很管用:

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

2013-04-23 19:28:48

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

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

推荐文章

最新文章

标签