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

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

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

AND

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

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


当前回答

HTML:

<body onscroll="stop_scroll()">

javascript:

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

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

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

其他回答

警告:下面的选项与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

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

我对这段代码不太确定,但值得一试。

jQuery:

$(document).ready(function() {
    $(/* Put in your "onModalDisplay" here */)./* whatever */(function() {
        $("#Modal").css("overflow", "hidden");
    });
});

就像我之前说过的,我不是百分百确定,但还是试一试吧。

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

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

window.addEventListener('load', function() { let prevScrollTop = 0; let isSidebarVisible = false; document.getElementById('f-overlay-chkbx').addEventListener('change', (event) => { prevScrollTop = window.pageYOffset || document.documentElement.scrollTop; isSidebarVisible = event.target.checked; window.addEventListener('scroll', (event) => { if (isSidebarVisible) { window.scrollTo(0, prevScrollTop); } }); }) });

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

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

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