我想让我的身体在使用鼠标滚轮时停止滚动，而我的网站上的Modal(来自http://twitter.github.com/bootstrap)是打开的。
当模式被打开时，我试图调用下面的javascript片段，但没有成功
$(window).scroll(function() { return false; });
AND
$(window).live('scroll', function() { return false; });
请注意，我们的网站放弃了对IE6的支持，IE7+需要兼容。
当前回答
不能让它在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);
});
其他回答
HTML:
<body onscroll="stop_scroll()">
javascript:
function stop_scroll(){
scroll(0,0) ;
}
如果你在stop_scroll()中设置了一个标记(bool)，你可以决定什么时候使用它(如果你只是暂时需要它)。
这将重置滚动每当某些元素溢出主体边界和窗口倾向于滚动(这是完全独立于滚动条;溢出:隐藏与此无关)。
简单地隐藏身体溢出，它使身体不滚动。隐藏模式时，将其恢复为自动模式。
代码如下:
$('#adminModal').modal().on('shown', function(){
$('body').css('overflow', 'hidden');
}).on('hidden', function(){
$('body').css('overflow', 'auto');
})
这个问题已经解决， 解决方案:只需打开bootstrap .css并按以下方式更改
body.modal-open,
.modal-open .navbar-fixed-top,
.modal-open .navbar-fixed-bottom {
margin-right: 15px;
}
to
body.modal-open,
.modal-open .navbar-fixed-top,
.modal-open .navbar-fixed-bottom {
/*margin-right: 15px;*/
}
请查看下面的youtube视频，只有不到3分钟，你的问题将解决… https://www.youtube.com/watch?v=kX7wPNMob_E
为什么不像布尔玛那样做呢? 当modal is-active时，将它们的类.is-clipped添加到html中，即overflow: hidden!important; 就是这样。
编辑:好的，Bulma有这个bug，所以你必须添加其他东西，比如
html.is-modal-active {
overflow: hidden !important;
position: fixed;
width: 100%;
}
我发现这是最好的解决方案:
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';
}
};
