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

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

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

AND

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

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


当前回答

我对Bootstrap 3的解决方案:

.modal {
  overflow-y: hidden;
}
body.modal-open {
  margin-right: 0;
}

因为对我来说唯一的溢出:隐藏在身上。模态打开类并没有阻止页面向左移动,因为原始的右距:15px。

其他回答

我对Bootstrap 3的解决方案:

.modal {
  overflow-y: hidden;
}
body.modal-open {
  margin-right: 0;
}

因为对我来说唯一的溢出:隐藏在身上。模态打开类并没有阻止页面向左移动,因为原始的右距:15px。

为什么不像布尔玛那样做呢? 当modal is-active时,将它们的类.is-clipped添加到html中,即overflow: hidden!important; 就是这样。

编辑:好的,Bulma有这个bug,所以你必须添加其他东西,比如

html.is-modal-active {
  overflow: hidden !important;
  position: fixed;
  width: 100%; 
}

你可以试着设置body size为window size, overflow:当modal打开时隐藏

隐藏溢出和固定位置的技巧,但在我的流体设计中,它会固定它超过浏览器宽度,所以宽度:100%固定。

body.modal-open{overflow:hidden;position:fixed;width:100%}

许多人建议在正文上使用“overflow: hidden”,这是行不通的(至少在我的情况下不是),因为它会让网站滚动到顶部。

这是适用于我的解决方案(手机和电脑),使用jQuery:

    $('.yourModalDiv').bind('mouseenter touchstart', function(e) {
        var current = $(window).scrollTop();
        $(window).scroll(function(event) {
            $(window).scrollTop(current);
        });
    });
    $('.yourModalDiv').bind('mouseleave touchend', function(e) {
        $(window).off('scroll');
    });

这将使模式的滚动工作,并防止网站在同一时间滚动。