我想让我的身体在使用鼠标滚轮时停止滚动，而我的网站上的Modal(来自http://twitter.github.com/bootstrap)是打开的。
当模式被打开时，我试图调用下面的javascript片段，但没有成功
$(window).scroll(function() { return false; });
AND
$(window).live('scroll', function() { return false; });
请注意，我们的网站放弃了对IE6的支持，IE7+需要兼容。
当前回答
这是我的香草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';
其他回答
我使用这个香草js函数添加“模态打开”类的身体。(根据smhmic的回答)
function freezeScroll(show, new_width)
{
var innerWidth = window.innerWidth,
clientWidth = document.documentElement.clientWidth,
new_margin = ((show) ? (new_width + innerWidth - clientWidth) : new_width) + "px";
document.body.style.marginRight = new_margin;
document.body.className = (show) ? "modal-open" : "";
};
警告:下面的选项与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
现在是2022年，现在有了更好的CSS解决方案。这很有效。当模式打开时，您可以将这个类添加到body元素中，或者修改body样式本身。
.body-no-scroll {
height: 100vh;
width: 100vw;
touch-action: none;
-webkit-overflow-scrolling: none;
overflow: hidden;
overscroll-behavior: none;
}
你可以试着设置body size为window size, overflow:当modal打开时隐藏
我对Bootstrap 3的解决方案:
.modal {
overflow-y: hidden;
}
body.modal-open {
margin-right: 0;
}
因为对我来说唯一的溢出:隐藏在身上。模态打开类并没有阻止页面向左移动，因为原始的右距:15px。
