当我的网站上的Modal（来自http://twitter.github.com/bootstrap）打开时，我希望我的身体在使用鼠标滚轮时停止滚动。
我试图在模式打开时调用下面的一段javascript，但没有成功
$(window).scroll(function() { return false; });和
$(window).live('scroll', function() { return false; });请注意，我们的网站已放弃了对IE6的支持，不过IE7 +需要兼容。
Answers:
在显示模式对话框时，Bootstrap会modal自动将类添加modal-open到主体，而在对话框隐藏时将其删除。因此，您可以将以下内容添加到CSS中：
body.modal-open {
overflow: hidden;
}您可能会争辩说，上面的代码属于Bootstrap CSS代码库，但这是将其添加到您的站点的简便解决方案。
2013年2月8日更新
这已经在Twitter Bootstrap 2.3.0版中停止了工作-他们不再将modal-open类添加到正文中。
一种解决方法是在要显示模式时将类添加到主体，并在关闭模式时将其删除：
$("#myModal").on("show", function () {
$("body").addClass("modal-open");
}).on("hidden", function () {
$("body").removeClass("modal-open")
});2013年3月11日更新
看起来modal-open该类将在Bootstrap 3.0中返回，明确地是为了防止滚动：
在主体上重新引入.modal-open（因此我们可以在此处滚动滚动条）
请参阅：https : //github.com/twitter/bootstrap/pull/6342-查看“ 模态”部分。
modal-open将会在Bootstrap 3中返回，因此启动时应安全删除上述代码。
可接受的答案不适用于移动设备（至少是装有Safari 7的iOS 7和Safari 7），并且我不希望CSS支持时在我的网站上运行MOAR JavaScript。
此CSS可以防止背景页面在模式下滚动：
body.modal-open {
overflow: hidden;
position: fixed;
}但是，它也具有基本滚动到顶部的轻微副作用。position:absolute解决了此问题，但重新引入了在移动设备上滚动的功能。
如果您知道您的视口（我的插件将视口添加到<body>），您只需添加一个CSS切换器position。
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;
}position: fixed。
只需隐藏身体溢出，它就不会滚动。隐藏模态时，将其还原为自动模态。
这是代码：
$('#adminModal').modal().on('shown', function(){
$('body').css('overflow', 'hidden');
}).on('hidden', function(){
$('body').css('overflow', 'auto');
})您可以尝试将主体大小设置为具有溢出的窗口大小：模式打开时隐藏
您需要超越@charlietfl的答案并考虑滚动条，否则您可能会看到文档重排。
body宽度body溢出设置为hidden将主体宽度显式设置为步骤1中的宽度。
var $body = $(document.body);
var oldWidth = $body.innerWidth();
$body.css("overflow", "hidden");
$body.width(oldWidth);body溢出设置为auto将body宽度设置为auto
var $body = $(document.body);
$body.css("overflow", "auto");
$body.width("auto");灵感来源：http : //jdsharp.us/jQuery/minute/calculate-scrollbar-width.php
$body.css("overflow", "auto");在最后一步:)
警告：以下选项与Bootstrap v3.0.x无关，因为在这些版本中的滚动已明确限于模式本身。如果禁用滚轮事件，则可能会无意间阻止某些用户以高度大于视口高度的模态查看内容。
该滚动事件不是取消。但是，可以取消鼠标滚轮和滚轮事件。最大的警告是，并非所有旧版浏览器都支持它们，Mozilla最近才在Gecko 17.0中添加了对后者的支持。我不知道它的全部范围，但是IE6 +和Chrome确实支持它们。
利用它们的方法如下：
$('#myModal')
.on('shown', function () {
$('body').on('wheel.modal mousewheel.modal', function () {
return false;
});
})
.on('hidden', function () {
$('body').off('wheel.modal mousewheel.modal');
});overflow:hidden目前更好。
/* =============================
* Disable / Enable Page Scroll
* when Bootstrap Modals are
* shown / hidden
* ============================= */
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
}
function theMouseWheel(e) {
preventDefault(e);
}
function disable_scroll() {
if (window.addEventListener) {
window.addEventListener('DOMMouseScroll', theMouseWheel, false);
}
window.onmousewheel = document.onmousewheel = theMouseWheel;
}
function enable_scroll() {
if (window.removeEventListener) {
window.removeEventListener('DOMMouseScroll', theMouseWheel, false);
}
window.onmousewheel = document.onmousewheel = null;
}
$(function () {
// disable page scrolling when modal is shown
$(".modal").on('show', function () { disable_scroll(); });
// enable page scrolling when modal is hidden
$(".modal").on('hide', function () { enable_scroll(); });
});仅仅通过更改CSS就无法使其在Chrome上运行，因为我不希望页面滚动回到顶部。这工作正常：
$("#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);
});可以添加“ is-modal-open”类或使用javascript修改body标签的样式，并且可以按预期工作。但是我们要面对的问题是当身体溢出时，它会隐藏到顶部（scrollTop将变为0）。稍后将成为可用性问题。
作为此问题的解决方案，而不是更改body标签溢出：隐藏在html标签上进行更改
$('#myModal').on('shown.bs.modal', function () {
$('html').css('overflow','hidden');
}).on('hidden.bs.modal', function() {
$('html').css('overflow','auto');
});我不确定这段代码，但是值得一试。
在jQuery中：
$(document).ready(function() {
$(/* Put in your "onModalDisplay" here */)./* whatever */(function() {
$("#Modal").css("overflow", "hidden");
});
});就像我之前说的，我不确定100％可以尝试。
截至2017年11月，Chrome推出了新的CSS属性
overscroll-behavior: contain;
尽管撰写本文时对跨浏览器的支持有限，但这解决了这个问题。
有关完整的详细信息和浏览器支持，请参见下面的链接
最好的解决方案是body{overflow:hidden}大多数答案使用的仅css 解决方案。一些答案提供了一种解决方案，还可以防止滚动条消失引起的“跳转”。但是，没有一个太优雅了。因此，我编写了这两个函数，它们似乎工作得很好。
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以查看其使用情况。
open modal按钮的宽度。Chrome on 8
许多人建议在主体上显示“溢出：隐藏”，这将无法工作（至少在我的情况下如此），因为它将使网站滚动到顶部。
这是使用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');
});这将使模式的滚动起作用，并阻止网站同时滚动。
您可以使用以下逻辑，我对其进行了测试并且可以正常工作（即使在IE中）
<html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
var currentScroll=0;
function lockscroll(){
$(window).scrollTop(currentScroll);
}
$(function(){
$('#locker').click(function(){
currentScroll=$(window).scrollTop();
$(window).bind('scroll',lockscroll);
})
$('#unlocker').click(function(){
currentScroll=$(window).scrollTop();
$(window).unbind('scroll');
})
})
</script>
<div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<button id="locker">lock</button>
<button id="unlocker">unlock</button>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>我不是100％确信它可以与Bootstrap一起使用，但值得一试-它与Remodal.js一起使用，可以在github上找到：http ://vodkabears.github.io/remodal/，这对于方法是有意义的非常相似。
要阻止页面跳到顶部并防止内容的右移，请body在触发模式时将类添加到，并设置以下CSS规则：
body.with-modal {
position: static;
height: auto;
overflow-y: hidden;
}是position:static和height:auto结合在一起才能阻止内容向右跳。在overflow-y:hidden;被模态的背后滚动停止页面。
基于此提琴：http : //jsfiddle.net/dh834zgw/1/
以下代码段（使用jquery）将禁用窗口滚动：
var curScrollTop = $(window).scrollTop();
$('html').toggleClass('noscroll').css('top', '-' + curScrollTop + 'px');并在您的CSS中：
html.noscroll{
position: fixed;
width: 100%;
top:0;
left: 0;
height: 100%;
overflow-y: scroll !important;
z-index: 10;
}现在，当您删除模态时，不要忘记删除html标签上的noscroll类：
$('html').toggleClass('noscroll');overflow设置为hidden吗？+1，因为这对我有用（使用hidden）。
我有一个由复选框黑客生成的边栏。但是主要思想是保存文档scrollTop，而不是在滚动窗口期间对其进行更改。
我只是不喜欢当正文变为“溢出：隐藏”时页面跳动。
window.addEventListener('load', function() {
let prevScrollTop = 0;
let isSidebarVisible = false;
document.getElementById('f-overlay-chkbx').addEventListener('change', (event) => {
prevScrollTop = window.pageYOffset || document.documentElement.scrollTop;
isSidebarVisible = event.target.checked;
window.addEventListener('scroll', (event) => {
if (isSidebarVisible) {
window.scrollTo(0, prevScrollTop);
}
});
})
});大部分内容都在这里，但我看不到任何答案可以将所有内容组合在一起。
问题是三重的。
（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绑定应用于全屏覆盖。
我只是这样做的...
$('body').css('overflow', 'hidden');但是当滚动条消失时，它向右移动了20px，所以我添加了
$('body').css('margin-right', '20px');之后。
为我工作。
如果模式是高度/宽度的100％，“ mouseenter / leave”将起作用以轻松启用/禁用滚动。这对我来说真的很有效：
var currentScroll=0;
function lockscroll(){
$(window).scrollTop(currentScroll);
}
$("#myModal").mouseenter(function(){
currentScroll=$(window).scrollTop();
$(window).bind('scroll',lockscroll);
}).mouseleave(function(){
currentScroll=$(window).scrollTop();
$(window).unbind('scroll',lockscroll);
});因为对我来说，这个问题主要在iOS上提出，所以我提供了仅在iOS上解决此问题的代码：
if(!!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform)) {
var $modalRep = $('#modal-id'),
startScrollY = null,
moveDiv;
$modalRep.on('touchmove', function(ev) {
ev.preventDefault();
moveDiv = startScrollY - ev.touches[0].clientY;
startScrollY = ev.touches[0].clientY;
var el = $(ev.target).parents('#div-that-scrolls');
// #div-that-scrolls is a child of #modal-id
el.scrollTop(el.scrollTop() + moveDiv);
});
$modalRep.on('touchstart', function(ev) {
startScrollY = ev.touches[0].clientY;
});
}上面的答案都不适合我。因此，我发现了另一种有效的方法。
只需添加一个scroll.(namespace)侦听器并将其设置scrollTop为document最新值即可...
并在关闭脚本中删除侦听器。
// in case of bootstrap modal example:
$('#myModal').on('shown.bs.modal', function () {
var documentScrollTop = $(document).scrollTop();
$(document).on('scroll.noScroll', function() {
$(document).scrollTop(documentScrollTop);
return false;
});
}).on('hidden.bs.modal', function() {
$(document).off('scroll.noScroll');
});看来，这在chrome上效果不佳。有什么建议可以解决吗？