我想让我的身体在使用鼠标滚轮时停止滚动，而我的网站上的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");
});
});
就像我之前说过的，我不是百分百确定，但还是试一试吧。
其他回答
Bootstrap的模态在模态对话框显示时自动将类modal-open添加到主体，并在对话框隐藏时将其删除。因此，您可以在CSS中添加以下内容:
body.modal-open {
overflow: hidden;
}
你可能会说上面的代码属于Bootstrap CSS代码库，但这是一个简单的修复，可以将它添加到你的网站。
2013年2月8日更新 这在Twitter Bootstrap v. 2.3.0中已经停止工作——他们不再向主体添加modal-open类。
一个变通的方法是在模态即将显示时将类添加到主体中，并在模态关闭时将其删除:
$("#myModal").on("show", function () {
$("body").addClass("modal-open");
}).on("hidden", function () {
$("body").removeClass("modal-open")
});
2013年3月11日更新 看起来modal-open类将在Bootstrap 3.0中返回，显式地用于防止滚动:
在body上重新引入。modal-open(这样我们就可以把滚动移到这里)
看这个:https://github.com/twitter/bootstrap/pull/6342 -看Modal部分。
当你在另一个模态中使用一个模态时，就会发生上述情况。当我在另一个模态中打开一个模态时，后者的关闭将从主体中移除类modal-open。这个问题的解决取决于你如何关闭后一个模式。
如果你用html关闭模态，
<button type="button" class="btn" data-dismiss="modal">Close</button>
然后你必须像这样添加一个监听器，
$(modalSelector).on("hidden.bs.modal", function (event) {
event.stopPropagation();
$("body").addClass("modal-open");
return false;
});
如果你用javascript关闭模态，
$(modalSelector).modal("hide");
然后你必须在一段时间后像这样运行命令，
setInterval(function(){$("body").addClass("modal-open");}, 300);
这是我的香草JS解决方案基于@jpap jquery:
let bodyElement = document.getElementsByTagName('body')[0];
// lock body scroll
let width = bodyElement.scrollWidth;
bodyElement.classList.add('overflow-hidden');
bodyElement.style.width = width + 'px';
// unlock body scroll
bodyElement.classList.remove('overflow-hidden');
bodyElement.style.width = 'auto';
我发现这是最好的解决方案:
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';
}
};
这是
body.modal-open {
overflow: hidden !important;
}
