我想让我的身体在使用鼠标滚轮时停止滚动，而我的网站上的Modal(来自http://twitter.github.com/bootstrap)是打开的。
当模式被打开时，我试图调用下面的javascript片段，但没有成功
$(window).scroll(function() { return false; });
AND
$(window).live('scroll', function() { return false; });
请注意，我们的网站放弃了对IE6的支持，IE7+需要兼容。
当前回答
我发现这是最好的解决方案:
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';
}
};
其他回答
简单地隐藏身体溢出，它使身体不滚动。隐藏模式时，将其恢复为自动模式。
代码如下:
$('#adminModal').modal().on('shown', function(){
$('body').css('overflow', 'hidden');
}).on('hidden', function(){
$('body').css('overflow', 'auto');
})
我刚才是这样做的……
$('body').css('overflow', 'hidden');
但当滚轮消失时，它将所有东西都正确移动了20px，所以我添加了
$('body').css('margin-right', '20px');
就在后面。
对我有用。
我对这段代码不太确定，但值得一试。
jQuery:
$(document).ready(function() {
$(/* Put in your "onModalDisplay" here */)./* whatever */(function() {
$("#Modal").css("overflow", "hidden");
});
});
就像我之前说过的，我不是百分百确定，但还是试一试吧。
您应该在HTML中添加overflow:隐藏以获得更好的跨平台性能。
我会用
html.no-scroll {
overflow: hidden;
}
对于那些想知道如何获得滚动事件的引导3模态:
$(".modal").scroll(function() {
console.log("scrolling!);
});
