我想让我的身体在使用鼠标滚轮时停止滚动，而我的网站上的Modal(来自http://twitter.github.com/bootstrap)是打开的。
当模式被打开时，我试图调用下面的javascript片段，但没有成功
$(window).scroll(function() { return false; });
AND
$(window).live('scroll', function() { return false; });
请注意，我们的网站放弃了对IE6的支持，IE7+需要兼容。
当前回答
您应该在HTML中添加overflow:隐藏以获得更好的跨平台性能。
我会用
html.no-scroll {
overflow: hidden;
}
其他回答
以上的答案都不适合我。所以我找到了另一种行之有效的方法。
只需添加一个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。有什么建议吗?
这招对我很管用:
$("#mymodal").mouseenter(function(){
$("body").css("overflow", "hidden");
}).mouseleave(function(){
$("body").css("overflow", "visible");
});
对于Bootstrap，你可以尝试这样做(在Firefox, Chrome和Microsoft Edge上工作):
body.modal-open {
overflow: hidden;
position:fixed;
width: 100%;
}
HTML:
<body onscroll="stop_scroll()">
javascript:
function stop_scroll(){
scroll(0,0) ;
}
如果你在stop_scroll()中设置了一个标记(bool)，你可以决定什么时候使用它(如果你只是暂时需要它)。
这将重置滚动每当某些元素溢出主体边界和窗口倾向于滚动(这是完全独立于滚动条;溢出:隐藏与此无关)。
我发现这是最好的解决方案:
export const removeBodyScrollingWhenModalOpen = (modalOpen: boolean) => {
console.log('modalOpen: ', modalOpen);
const body = document.body;
if (modalOpen && isMobile()) {
const scrollY = document.documentElement.style.getPropertyValue('--scroll-y');
body.style.position = 'fixed';
body.style.top = `-${scrollY}`;
} else if (!modalOpen && isMobile()) {
const scrollY = body.style.top;
body.style.position = '';
body.style.top = '';
window.scrollTo(0, parseInt(scrollY || '0') * -1);
} else if (modalOpen) {
document.body.style.overflowY = 'hidden';
} else {
document.body.style.overflowY = 'visible';
}
};
