我想让我的身体在使用鼠标滚轮时停止滚动，而我的网站上的Modal(来自http://twitter.github.com/bootstrap)是打开的。
当模式被打开时，我试图调用下面的javascript片段，但没有成功
$(window).scroll(function() { return false; });
AND
$(window).live('scroll', function() { return false; });
请注意，我们的网站放弃了对IE6的支持，IE7+需要兼容。
当前回答
我对这段代码不太确定，但值得一试。
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%;
}
最著名的答案很简单，即。
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";
}
大部分的片段都在这里，但我没有看到任何答案把它们放在一起。
这个问题有三个方面。
(1)防止底层页面滚动
$('body').css('overflow', 'hidden')
(2)并移除滚动条
var handler = function (e) { e.preventDefault() }
$('.modal').bind('mousewheel touchmove', handler)
(3)模态解散时进行清理
$('.modal').unbind('mousewheel touchmove', handler)
$('body').css('overflow', '')
如果模式不是全屏，那么将.modal绑定应用到全屏覆盖。
你可以使用下面的逻辑，我测试了它，它可以工作(即使在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>
