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

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

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

AND

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

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


当前回答

下面是我在React中修复这个问题的方法:

useEffect(() => {
  if (isShown) {
    const width = document.body.clientWidth;
    document.body.style.overflow = "hidden";
    document.body.style.width = `${width}px`;
  } else {
    document.body.style.overflow = "visible";
    document.body.style.width = `auto`;
  }

  return () => {
    document.body.style.overflow = "visible";
    document.body.style.width = `auto`;
  };
}, [isShown]);

其他回答

当你在另一个模态中使用一个模态时,就会发生上述情况。当我在另一个模态中打开一个模态时,后者的关闭将从主体中移除类modal-open。这个问题的解决取决于你如何关闭后一个模式。

如果你用html关闭模态,

<button type="button" class="btn" data-dismiss="modal">Close</button>

然后你必须像这样添加一个监听器,

$(modalSelector).on("hidden.bs.modal", function (event) {
    event.stopPropagation();
    $("body").addClass("modal-open");
    return false;
});

如果你用javascript关闭模态,

$(modalSelector).modal("hide");

然后你必须在一段时间后像这样运行命令,

setInterval(function(){$("body").addClass("modal-open");}, 300);

基于此提琴:http://jsfiddle.net/dh834zgw/1/

下面的代码片段(使用jquery)将禁用窗口滚动:

 var curScrollTop = $(window).scrollTop();
 $('html').toggleClass('noscroll').css('top', '-' + curScrollTop + 'px');

在你的css中:

html.noscroll{
    position: fixed;
    width: 100%;
    top:0;
    left: 0;
    height: 100%;
    overflow-y: scroll !important;
    z-index: 10;
 }

现在,当你删除模态时,不要忘记删除html标签上的noscroll类:

$('html').toggleClass('noscroll');

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

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

对于Bootstrap,你可以尝试这样做(在Firefox, Chrome和Microsoft Edge上工作):

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

这是我的香草JS解决方案基于@jpap jquery:

let bodyElement = document.getElementsByTagName('body')[0];

// lock body scroll
    let width = bodyElement.scrollWidth;
    bodyElement.classList.add('overflow-hidden');
    bodyElement.style.width = width + 'px';

// unlock body scroll
    bodyElement.classList.remove('overflow-hidden');
    bodyElement.style.width = 'auto';