我想让我的身体在使用鼠标滚轮时停止滚动，而我的网站上的Modal(来自http://twitter.github.com/bootstrap)是打开的。
当模式被打开时，我试图调用下面的javascript片段，但没有成功
$(window).scroll(function() { return false; });
AND
$(window).live('scroll', function() { return false; });
请注意，我们的网站放弃了对IE6的支持，IE7+需要兼容。
当前回答
警告:下面的选项与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
其他回答
/* =============================
* Disable / Enable Page Scroll
* when Bootstrap Modals are
* shown / hidden
* ============================= */
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
}
function theMouseWheel(e) {
preventDefault(e);
}
function disable_scroll() {
if (window.addEventListener) {
window.addEventListener('DOMMouseScroll', theMouseWheel, false);
}
window.onmousewheel = document.onmousewheel = theMouseWheel;
}
function enable_scroll() {
if (window.removeEventListener) {
window.removeEventListener('DOMMouseScroll', theMouseWheel, false);
}
window.onmousewheel = document.onmousewheel = null;
}
$(function () {
// disable page scrolling when modal is shown
$(".modal").on('show', function () { disable_scroll(); });
// enable page scrolling when modal is hidden
$(".modal").on('hide', function () { enable_scroll(); });
});
2017年11月Chrome引入了一个新的css属性
overscroll-behavior:包含;
这解决了这个问题，尽管在编写时跨浏览器支持有限。
有关详细信息和浏览器支持，请参阅下面的链接
https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior https://developers.google.com/web/updates/2017/11/overscroll-behavior
在StackOverflow上做了8-10个小时的研究后，我找到了一个可行的解决方案。
突破
$('.modal').is(':visible');
因此，我已经构建了一个函数来检查是否有任何模态是打开的，它将定期添加类*modal-open**到
setInterval(function()
{
if($('.modal').is(':visible')===true)
{
$("body").addClass("modal-open");
}
else
{
$("body").removeClass("modal-open");
}
},200);
这里使用$(".modal")的原因是所有的模态(在Bootstrap中)都使用类modal (fade/show是根据状态而定)
所以我的模态现在运行完美没有身体得到滚动。
这在GitHub中也是一个bug/闻所未闻的问题，但没有人打扰。
你可以试着设置body size为window size, overflow:当modal打开时隐藏
我对Bootstrap 3的解决方案:
.modal {
overflow-y: hidden;
}
body.modal-open {
margin-right: 0;
}
因为对我来说唯一的溢出:隐藏在身上。模态打开类并没有阻止页面向左移动，因为原始的右距:15px。
