我想让我的身体在使用鼠标滚轮时停止滚动，而我的网站上的Modal(来自http://twitter.github.com/bootstrap)是打开的。
当模式被打开时，我试图调用下面的javascript片段，但没有成功
$(window).scroll(function() { return false; });
AND
$(window).live('scroll', function() { return false; });
请注意，我们的网站放弃了对IE6的支持，IE7+需要兼容。
当前回答
你可以使用下面的逻辑，我测试了它，它可以工作(即使在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>
其他回答
试试这个:
.modal-open {
overflow: hidden;
position:fixed;
width: 100%;
height: 100%;
}
这对我很管用。(支持IE8)
对于那些想知道如何获得滚动事件的引导3模态:
$(".modal").scroll(function() {
console.log("scrolling!);
});
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
我有一个边栏，是由复选框黑客生成的。 但主要思想是保存文档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); } }); }) });
下面是我在React中修复这个问题的方法:
useEffect(() => {
if (isShown) {
const width = document.body.clientWidth;
document.body.style.overflow = "hidden";
document.body.style.width = `${width}px`;
} else {
document.body.style.overflow = "visible";
document.body.style.width = `auto`;
}
return () => {
document.body.style.overflow = "visible";
document.body.style.width = `auto`;
};
}, [isShown]);
