我想让我的身体在使用鼠标滚轮时停止滚动，而我的网站上的Modal(来自http://twitter.github.com/bootstrap)是打开的。
当模式被打开时，我试图调用下面的javascript片段，但没有成功
$(window).scroll(function() { return false; });
AND
$(window).live('scroll', function() { return false; });
请注意，我们的网站放弃了对IE6的支持，IE7+需要兼容。
当前回答
反应，如果你在寻找
正在弹出的模态中的useEffect
useEffect(() => {
document.body.style.overflowY = 'hidden';
return () =>{
document.body.style.overflowY = 'auto';
}
}, [])
其他回答
试试这个:
.modal-open {
overflow: hidden;
position:fixed;
width: 100%;
height: 100%;
}
这对我很管用。(支持IE8)
添加类'is-modal-open'或用javascript修改body标签的样式都是可以的，它会像预期的那样工作。但我们要面对的问题是当body变成overflow:hidden时，它会跳到顶部(scrollTop将变成0)。这将在以后成为一个可用性问题。
作为这个问题的解决方案，而不是改变正文标签溢出:隐藏改变它在html标签
$('#myModal').on('shown.bs.modal', function () {
$('html').css('overflow','hidden');
}).on('hidden.bs.modal', function() {
$('html').css('overflow','auto');
});
对于Bootstrap，你可以尝试这样做(在Firefox, Chrome和Microsoft Edge上工作):
body.modal-open {
overflow: hidden;
position:fixed;
width: 100%;
}
许多人建议在正文上使用“overflow: hidden”，这是行不通的(至少在我的情况下不是)，因为它会让网站滚动到顶部。
这是适用于我的解决方案(手机和电脑)，使用jQuery:
$('.yourModalDiv').bind('mouseenter touchstart', function(e) {
var current = $(window).scrollTop();
$(window).scroll(function(event) {
$(window).scrollTop(current);
});
});
$('.yourModalDiv').bind('mouseleave touchend', function(e) {
$(window).off('scroll');
});
这将使模式的滚动工作，并防止网站在同一时间滚动。
我对这段代码不太确定，但值得一试。
jQuery:
$(document).ready(function() {
$(/* Put in your "onModalDisplay" here */)./* whatever */(function() {
$("#Modal").css("overflow", "hidden");
});
});
就像我之前说过的，我不是百分百确定，但还是试一试吧。
