我想让我的身体在使用鼠标滚轮时停止滚动，而我的网站上的Modal(来自http://twitter.github.com/bootstrap)是打开的。
当模式被打开时，我试图调用下面的javascript片段，但没有成功
$(window).scroll(function() { return false; });
AND
$(window).live('scroll', function() { return false; });
请注意，我们的网站放弃了对IE6的支持，IE7+需要兼容。
当前回答
以上的答案都不适合我。所以我找到了另一种行之有效的方法。
只需添加一个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').on({'mousewheel': function(e)
{
if (e.target.id == 'el') return;
e.preventDefault();
e.stopPropagation();
}
});
我发现这是最好的解决方案:
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';
}
};
对于那些想知道如何获得滚动事件的引导3模态:
$(".modal").scroll(function() {
console.log("scrolling!);
});
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部分。
不能让它在Chrome上工作，只是通过改变CSS，因为我不想让页面滚动回顶部。这很有效:
$("#myModal").on("show.bs.modal", function () {
var top = $("body").scrollTop(); $("body").css('position','fixed').css('overflow','hidden').css('top',-top).css('width','100%').css('height',top+5000);
}).on("hide.bs.modal", function () {
var top = $("body").position().top; $("body").css('position','relative').css('overflow','auto').css('top',0).scrollTop(-top);
});
