我想让我的身体在使用鼠标滚轮时停止滚动,而我的网站上的Modal(来自http://twitter.github.com/bootstrap)是打开的。

当模式被打开时,我试图调用下面的javascript片段,但没有成功

$(window).scroll(function() { return false; });

AND

$(window).live('scroll', function() { return false; });

请注意,我们的网站放弃了对IE6的支持,IE7+需要兼容。


当前回答

这是

body.modal-open {
   overflow: hidden !important;
}

其他回答

这是

body.modal-open {
   overflow: hidden !important;
}

最著名的答案很简单,即。

body{
   height: 100%;
   overflow-y: hidden;
}

但是,如果你想在子/孙子中打开一个模态并停止滚动,该如何解决呢?更长期的解决方案是使用props或存储在Angular/React中,并改变body标签的高度和溢出属性。

另一种解决方案是从子/孙子组件获取主体,并相应地改变其高度和溢出以停止滚动。 在我的例子中,我只是这样做的

if(isModalExpanded){
    document.body.style.overflow = "hidden";
    document.body.style.height = "100%";
}
else{
    document.body.style.overflow = "auto";
    document.body.style.height = "auto";
}

对于那些使用SharePoint 2013的人,有一个小提示。主体已经有overflow: hidden。你要找的是设置overflow:隐藏在id为s4-workspace的div元素上,例如。

var body = document.getElementById('s4-workspace');
body.className = body.className+" modal-open";

简单地隐藏身体溢出,它使身体不滚动。隐藏模式时,将其恢复为自动模式。

代码如下:

$('#adminModal').modal().on('shown', function(){
    $('body').css('overflow', 'hidden');
}).on('hidden', function(){
    $('body').css('overflow', 'auto');
})

我不是100%确定这将与Bootstrap一起工作,但值得一试-它与momodar .js一起工作,可以在github上找到:http://vodkabears.github.io/remodal/,它将有意义的方法非常相似。

为了阻止页面跳转到顶部,也防止内容右移,在模态触发时向主体添加一个类,并设置以下CSS规则:

body.with-modal {
    position: static;
    height: auto;
    overflow-y: hidden;
}

位置:静态和高度:自动结合起来阻止内容向右跳转。overflow-y:隐藏;停止页面在模态后面可滚动。