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

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

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

AND

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

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


当前回答

许多人建议在正文上使用“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');
    });

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

其他回答

   $('.modal').on('shown.bs.modal', function (e) {
      $('body').css('overflow-y', 'hidden');
   });
   $('.modal').on('hidden.bs.modal', function (e) {
      $('body').css('overflow-y', '');
   });

2017年11月Chrome引入了一个新的css属性

overscroll-behavior:包含;

这解决了这个问题,尽管在编写时跨浏览器支持有限。

有关详细信息和浏览器支持,请参阅下面的链接

https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior https://developers.google.com/web/updates/2017/11/overscroll-behavior

接受的答案不工作在手机上(iOS 7 w/ Safari 7,至少),我不希望MOAR JavaScript运行在我的网站上,当CSS将做。

这个CSS将阻止后台页面在模式下滚动:

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

然而,它也有一个轻微的副作用,基本上是滚动到顶部。位置:绝对解决了这个问题,但是,重新引入了在移动设备上滚动的能力。

如果你知道你的视口(我的插件为<body>添加视口),你可以为这个位置添加一个css切换。

body.modal-open {
    // block scroll for mobile;
    // causes underlying page to jump to top;
    // prevents scrolling on all screens
    overflow: hidden;
    position: fixed;
}
body.viewport-lg {
    // block scroll for desktop;
    // will not jump to top;
    // will not prevent scroll on mobile
    position: absolute; 
}

我还添加了这个,以防止底层页面在显示/隐藏情态动词时左/右跳转。

body {
    // STOP MOVING AROUND!
    overflow-x: hidden;
    overflow-y: scroll !important;
}

这个答案是x-post。

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

代码如下:

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

试试下面的代码:

$('.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');
    }
});