我想让我的身体在使用鼠标滚轮时停止滚动，而我的网站上的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);
});
其他回答
试试下面的代码:
$('.entry_details').dialog({
width:800,
height:500,
draggable: true,
title: entry.short_description,
closeText: "Zamknij",
open: function(){
// blokowanie scrolla dla body
var body_scroll = $(window).scrollTop();
$(window).on('scroll', function(){
$(document).scrollTop(body_scroll);
});
},
close: function(){
$(window).off('scroll');
}
});
在StackOverflow上做了8-10个小时的研究后，我找到了一个可行的解决方案。
突破
$('.modal').is(':visible');
因此，我已经构建了一个函数来检查是否有任何模态是打开的，它将定期添加类*modal-open**到
setInterval(function()
{
if($('.modal').is(':visible')===true)
{
$("body").addClass("modal-open");
}
else
{
$("body").removeClass("modal-open");
}
},200);
这里使用$(".modal")的原因是所有的模态(在Bootstrap中)都使用类modal (fade/show是根据状态而定)
所以我的模态现在运行完美没有身体得到滚动。
这在GitHub中也是一个bug/闻所未闻的问题，但没有人打扰。
对于Bootstrap，你可以尝试这样做(在Firefox, Chrome和Microsoft Edge上工作):
body.modal-open {
overflow: hidden;
position:fixed;
width: 100%;
}
我不是100%确定这将与Bootstrap一起工作，但值得一试-它与momodar .js一起工作，可以在github上找到:http://vodkabears.github.io/remodal/，它将有意义的方法非常相似。
为了阻止页面跳转到顶部，也防止内容右移，在模态触发时向主体添加一个类，并设置以下CSS规则:
body.with-modal {
position: static;
height: auto;
overflow-y: hidden;
}
位置:静态和高度:自动结合起来阻止内容向右跳转。overflow-y:隐藏;停止页面在模态后面可滚动。
大部分的片段都在这里，但我没有看到任何答案把它们放在一起。
这个问题有三个方面。
(1)防止底层页面滚动
$('body').css('overflow', 'hidden')
(2)并移除滚动条
var handler = function (e) { e.preventDefault() }
$('.modal').bind('mousewheel touchmove', handler)
(3)模态解散时进行清理
$('.modal').unbind('mousewheel touchmove', handler)
$('body').css('overflow', '')
如果模式不是全屏，那么将.modal绑定应用到全屏覆盖。
