打开模式时防止 BODY 滚动
当我网站上的模态（来自 http://twitter.github.com/bootstrap）打开时，我希望我的身体在使用鼠标滚轮时停止滚动。
当模式打开但没有成功时，我尝试调用下面的一段 javascript
$(window).scroll(function() { return false; });
和
$(window).live('scroll', function() { return false; });
请注意我们的网站放弃了对 IE6 的支持，但 IE7+ 需要兼容。
Bootstrap 的 modal 会在显示模式对话框时自动将类 modal-open 添加到正文中，并在隐藏对话框时将其删除。因此，您可以在 CSS 中添加以下内容：
body.modal-open {
overflow: hidden;
}
您可能会争辩说上面的代码属于 Bootstrap CSS 代码库，但这是将其添加到您的站点的简单修复。
2013 年 2 月 8 日更新
这已在 Twitter Bootstrap v. 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 中返回，明确用于防止滚动：
在 body 上重新引入 .modal-open（这样我们就可以在那里对滚动条进行核对）
请参阅：https://github.com/twitter/bootstrap/pull/6342 - 查看 Modal 部分。
接受的答案在移动设备上不起作用（至少是带有 Safari 7 的 iOS 7），我不希望当 CSS 可以运行时 MOAR JavaScript 在我的网站上运行。
这个 CSS 将阻止背景页面在模态下滚动：
body.modal-open {
overflow: hidden;
position: fixed;
}
但是，它也有一个轻微的副作用，即基本上滚动到顶部。 position:absolute 解决了这个问题，但重新引入了在移动设备上滚动的功能。
如果您知道您的视口 (my plugin for adding viewport to the <body>)，您只需为 position 添加一个 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;
}
position: fixed 就无法工作。
js const currPageScrollPos = $(window).scrollTop() $("body").removeClass("show_overlay") $(window).delay(5).scrollTop(currPageScrollPos)
只需隐藏正文溢出，它就会使正文不滚动。隐藏模式时，将其恢复为自动模式。
这是代码：
$('#adminModal').modal().on('shown', function(){
$('body').css('overflow', 'hidden');
}).on('hidden', function(){
$('body').css('overflow', 'auto');
})
您需要超越@charlietfl 的答案并考虑滚动条，否则您可能会看到文档重排。
打开模态：
记录正文宽度 将正文溢出设置为隐藏 将正文宽度显式设置为步骤 1 中的值。 var $body = $(document.body); var oldWidth = $body.innerWidth(); $body.css("溢出", "隐藏"); $body.width(oldWidth);
关闭模态：
将正文溢出设置为自动 将正文宽度设置为自动 var $body = $(document.body); $body.css("溢出", "auto"); $body.width("自动");
灵感来源：http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php
$body.css("overflow", "auto"); :)
您可以尝试将 body size 设置为 window size with overflow: hidden when modal is open
警告：下面的选项与 Bootstrap v3.0.x 无关，因为在这些版本中滚动已明确限于模式本身。如果您禁用滚轮事件，您可能会无意中阻止某些用户在高度大于视口高度的模式中查看内容。
另一种选择：车轮事件
scroll 事件是不可取消的。但是，可以取消 mousewheel 和 wheel 事件。最大的警告是并非所有旧版浏览器都支持它们，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');
});
JSFiddle
overflow:hidden 现在更好。
试试这个：
.modal-open {
overflow: hidden;
position:fixed;
width: 100%;
height: 100%;
}
它对我有用。 （支持 IE8）
position: fixed 打开模式时跳转到顶部。
/* =============================
* 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标签的样式是可以的，它会按预期工作。但是我们要面临的问题是当body变成overflow:hidden时，它会跳到顶部，（scrollTop会变成0）。这将成为稍后的可用性问题。
作为这个问题的解决方案，而不是改变body标签溢出：隐藏在html标签上改变它
$('#myModal').on('shown.bs.modal', function () {
$('html').css('overflow','hidden');
}).on('hidden.bs.modal', function() {
$('html').css('overflow','auto');
});
截至 2017 年 11 月，Chrome 引入了一个新的 CSS 属性
overscroll-behavior: contain;
它解决了这个问题，尽管在撰写本文时跨浏览器支持有限。
有关完整详细信息和浏览器支持，请参见下面的链接
https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior
https://developers.google.com/web/updates/2017/11/overscroll-behavior
对于 Bootstrap，你可以试试这个（在 Firefox、Chrome 和 Microsoft Edge 上工作）：
body.modal-open {
overflow: hidden;
position:fixed;
width: 100%;
}
希望这可以帮助...
我不确定这段代码，但值得一试。
在 jQuery 中：
$(document).ready(function() {
$(/* Put in your "onModalDisplay" here */)./* whatever */(function() {
$("#Modal").css("overflow", "hidden");
});
});
正如我之前所说，我不是 100% 确定，但还是试试吧。
我不是 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; 阻止页面在模式后面滚动。
最好的解决方案是大多数这些答案使用的纯 css 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');
}
查看 this jsFiddle 以查看它的使用情况。
open modal 按钮的宽度。镀铬 8
反应，如果你正在寻找
正在弹出的模态中的 useEffect
useEffect(() => {
document.body.style.overflowY = 'hidden';
return () =>{
document.body.style.overflowY = 'auto';
}
}, [])
许多人建议在正文上使用“溢出：隐藏”，这不起作用（至少在我的情况下不是），因为它会使网站滚动到顶部。
这是适用于我的解决方案（在手机和电脑上），使用 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');
});
这将使模态的滚动起作用，并防止网站同时滚动。
我必须设置视口高度才能使其完美运行
body.modal-open {
height: 100vh;
overflow: hidden;
}
您可以使用以下逻辑，我对其进行了测试并且可以正常工作（即使在 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>
基于这个小提琴：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）。
可悲的是，上面的答案都没有解决我的问题。
在我的情况下，网页最初有一个滚动条。每当我单击模式时，滚动条都不会消失，并且标题会向右移动一点。
然后我尝试添加 .modal-open{overflow:auto;}（大多数人推荐）。它确实解决了问题：打开模式后出现滚动条。但是，另一个副作用是“标题下方的背景会向左移动一点，以及模态后面的另一个长条”
https://i.stack.imgur.com/qZa3y.png
幸运的是，在我添加 {padding-right: 0 !important;} 之后，一切都完美修复了。标题和正文背景都没有移动，模态仍然保留滚动条。
https://i.stack.imgur.com/AzzuA.png
希望这可以帮助那些仍然被这个问题困扰的人。祝你好运！
这对我有用：
$("#mymodal").mouseenter(function(){
$("body").css("overflow", "hidden");
}).mouseleave(function(){
$("body").css("overflow", "visible");
});
大多数作品都在这里，但我没有看到任何将它们放在一起的答案。
问题是三方面的。
(1)防止底层页面的滚动
$('body').css('overflow', 'hidden')
(2)并去掉滚动条
var handler = function (e) { e.preventDefault() }
$('.modal').bind('mousewheel touchmove', handler)
(3) modal 被dismiss时的清理
$('.modal').unbind('mousewheel touchmove', handler)
$('body').css('overflow', '')
如果模态不是全屏，则将 .modal 绑定应用于全屏覆盖。
我对 Bootstrap 3 的解决方案：
.modal {
overflow-y: hidden;
}
body.modal-open {
margin-right: 0;
}
因为对我来说，body.modal-open 类中唯一的 overflow: hidden 并没有阻止页面由于原始 margin-right: 15px 而向左移动。
我就是这样弄的...
$('body').css('overflow', 'hidden');
但是当滚动条消失时，它把所有东西都向右移动了 20 像素，所以我添加了
$('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);
});
我有一个由复选框 hack 生成的侧边栏。但主要思想是保存文档 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); } }); }) });
因为对我来说这个问题主要出现在 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) 侦听器并将 document 的 scrollTop 设置为它的最新值...
并在您的关闭脚本中删除侦听器。
// 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 上效果不佳。有什么建议可以解决吗？
这有效
body.modal-open {
overflow: hidden !important;
}
modal-open将在 Bootstrap 3 中返回，因此在启动时删除上述代码应该是安全的。