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

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

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

AND

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

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


当前回答

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

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

其他回答

HTML:

<body onscroll="stop_scroll()">

javascript:

function stop_scroll(){
    scroll(0,0) ;
}

如果你在stop_scroll()中设置了一个标记(bool),你可以决定什么时候使用它(如果你只是暂时需要它)。

这将重置滚动每当某些元素溢出主体边界和窗口倾向于滚动(这是完全独立于滚动条;溢出:隐藏与此无关)。

下面是我在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]);

警告:下面的选项与Bootstrap v3.0无关。X,因为在这些版本中滚动被显式地限制在模态本身。如果禁用轮事件,可能会无意中阻止一些用户在高度大于视口高度的模态中查看内容。


还有另一个选择:车轮事件

滚动事件不可取消。但是,可以取消鼠标滚轮和滚轮事件。需要注意的是,并不是所有的传统浏览器都支持它们,Mozilla最近才在Gecko 17.0中添加了对后者的支持。我不知道它们的全部分布,但IE6+和Chrome确实支持它们。

下面是如何利用它们的方法:

$('#myModal')
  .on('shown', function () {
    $('body').on('wheel.modal mousewheel.modal', function () {
      return false;
    });
  })
  .on('hidden', function () {
    $('body').off('wheel.modal mousewheel.modal');
  });

JSFiddle

这对我来说是最好的解决方案:

Css:

.modal {
     overflow-y: auto !important;
}

Js:

modalShown = function () {
    $('body').css('overflow', 'hidden');
},

modalHidden = function () {
    $('body').css('overflow', 'auto');
}

接受的答案不工作在手机上(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。