我希望我的身体在我网站上的 Modal（来自http://twitter.github.com/bootstrap）打开时使用鼠标滚轮停止滚动。
我试图在打开模态时调用下面的一段 javascript 但没有成功
$(window).scroll(function() { return false; });
和
$(window).live('scroll', function() { return false; });
请注意我们的网站不再支持 IE6，但 IE7+ 需要兼容。
打开模态时防止 BODY 滚动
IT技术
javascript
jquery
css
scroll
2021-01-18 06:54:32
6个回答
Bootstrapmodal会在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 中返回，明确用于防止滚动：
在身体上重新引入 .modal-open （所以我们可以在那里取消滚动）
请参阅：https : //github.com/twitter/bootstrap/pull/6342 - 查看Modal部分。
接受的答案不适用于移动设备（iOS 7 w/ Safari 7，至少），并且当 CSS 可以运行时，我不希望 MOAR JavaScript 在我的网站上运行。
此 CSS 将阻止背景页面在模态下滚动：
body.modal-open {
overflow: hidden;
position: fixed;
}
但是，它也有轻微的副作用，即基本上滚动到顶部。position:absolute解决了这个问题，但重新引入了在移动设备上滚动的能力。
如果您知道您的视口（我的插件，用于将视口添加到<body>），您只需为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;
}
简单地隐藏身体溢出，它使身体不滚动。当您隐藏模式时，将其恢复为自动。
这是代码：
$('#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宽度设置为autovar $body = $(document.body); $body.css("overflow", "auto"); $body.width("auto");
灵感来源：http : //jdsharp.us/jQuery/minute/calculate-scrollbar-width.php
您可以尝试将 body size 设置为 window size with overflow: hidden when modal is open
其它你可能感兴趣的问题