我想让我的身体在使用鼠标滚轮时停止滚动，而我的网站上的Modal(来自http://twitter.github.com/bootstrap)是打开的。
当模式被打开时，我试图调用下面的javascript片段，但没有成功
$(window).scroll(function() { return false; });
AND
$(window).live('scroll', function() { return false; });
请注意，我们的网站放弃了对IE6的支持，IE7+需要兼容。
当前回答
我对Bootstrap 3的解决方案:
.modal {
overflow-y: hidden;
}
body.modal-open {
margin-right: 0;
}
因为对我来说唯一的溢出:隐藏在身上。模态打开类并没有阻止页面向左移动，因为原始的右距:15px。
其他回答
你可以试着设置body size为window size, overflow:当modal打开时隐藏
反应，如果你在寻找
正在弹出的模态中的useEffect
useEffect(() => {
document.body.style.overflowY = 'hidden';
return () =>{
document.body.style.overflowY = 'auto';
}
}, [])
最著名的答案很简单，即。
body{
height: 100%;
overflow-y: hidden;
}
但是，如果你想在子/孙子中打开一个模态并停止滚动，该如何解决呢?更长期的解决方案是使用props或存储在Angular/React中，并改变body标签的高度和溢出属性。
另一种解决方案是从子/孙子组件获取主体，并相应地改变其高度和溢出以停止滚动。 在我的例子中，我只是这样做的
if(isModalExpanded){
document.body.style.overflow = "hidden";
document.body.style.height = "100%";
}
else{
document.body.style.overflow = "auto";
document.body.style.height = "auto";
}
以上的答案都不适合我。所以我找到了另一种行之有效的方法。
只需添加一个scroll.(命名空间)监听器，并将文档的scrollTop设置为它的最新值…
并在关闭脚本中删除侦听器。
// in case of bootstrap modal example:
$('#myModal').on('shown.bs.modal', function () {
var documentScrollTop = $(document).scrollTop();
$(document).on('scroll.noScroll', function() {
$(document).scrollTop(documentScrollTop);
return false;
});
}).on('hidden.bs.modal', function() {
$(document).off('scroll.noScroll');
});
更新
似乎，这不是很好地工作在chrome。有什么建议吗?
你可以使用下面的逻辑，我测试了它，它可以工作(即使在IE中)
<html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
var currentScroll=0;
function lockscroll(){
$(window).scrollTop(currentScroll);
}
$(function(){
$('#locker').click(function(){
currentScroll=$(window).scrollTop();
$(window).bind('scroll',lockscroll);
})
$('#unlocker').click(function(){
currentScroll=$(window).scrollTop();
$(window).unbind('scroll');
})
})
</script>
<div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<button id="locker">lock</button>
<button id="unlocker">unlock</button>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
