我想让我的身体在使用鼠标滚轮时停止滚动，而我的网站上的Modal(来自http://twitter.github.com/bootstrap)是打开的。
当模式被打开时，我试图调用下面的javascript片段，但没有成功
$(window).scroll(function() { return false; });
AND
$(window).live('scroll', function() { return false; });
请注意，我们的网站放弃了对IE6的支持，IE7+需要兼容。
当前回答
最好的解决方案是大多数答案所使用的css-only body{overflow:hidden}解决方案。一些答案提供了一个修复，也防止“跳跃”造成的消失滚动条;然而，没有一个太优雅。我写了这两个函数，它们看起来工作得很好。
var $body = $(window.document.body);
function bodyFreezeScroll() {
var bodyWidth = $body.innerWidth();
$body.css('overflow', 'hidden');
$body.css('marginRight', ($body.css('marginRight') ? '+=' : '') + ($body.innerWidth() - bodyWidth))
}
function bodyUnfreezeScroll() {
var bodyWidth = $body.innerWidth();
$body.css('marginRight', '-=' + (bodyWidth - $body.innerWidth()))
$body.css('overflow', 'auto');
}
查看jsFiddle的使用情况。
其他回答
接受的答案不工作在手机上(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。
你可以试着设置body size为window size, overflow:当modal打开时隐藏
隐藏溢出和固定位置的技巧，但在我的流体设计中，它会固定它超过浏览器宽度，所以宽度:100%固定。
body.modal-open{overflow:hidden;position:fixed;width:100%}
这是我的香草JS解决方案基于@jpap jquery:
let bodyElement = document.getElementsByTagName('body')[0];
// lock body scroll
let width = bodyElement.scrollWidth;
bodyElement.classList.add('overflow-hidden');
bodyElement.style.width = width + 'px';
// unlock body scroll
bodyElement.classList.remove('overflow-hidden');
bodyElement.style.width = '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');
}
});
