我想让我的身体在使用鼠标滚轮时停止滚动,而我的网站上的Modal(来自http://twitter.github.com/bootstrap)是打开的。
当模式被打开时,我试图调用下面的javascript片段,但没有成功
$(window).scroll(function() { return false; });
AND
$(window).live('scroll', function() { return false; });
请注意,我们的网站放弃了对IE6的支持,IE7+需要兼容。
不能让它在Chrome上工作,只是通过改变CSS,因为我不想让页面滚动回顶部。这很有效:
$("#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);
});
最著名的答案很简单,即。
body{
height: 100%;
overflow-y: hidden;
}
但是,如果你想在子/孙子中打开一个模态并停止滚动,该如何解决呢?更长期的解决方案是使用props或存储在Angular/React中,并改变body标签的高度和溢出属性。
另一种解决方案是从子/孙子组件获取主体,并相应地改变其高度和溢出以停止滚动。
在我的例子中,我只是这样做的
if(isModalExpanded){
document.body.style.overflow = "hidden";
document.body.style.height = "100%";
}
else{
document.body.style.overflow = "auto";
document.body.style.height = "auto";
}
您需要超越@charlietfl的答案并考虑滚动条,否则您可能会看到一个文档回流。
打开模式:
记录身体宽度
将正文溢出设置为隐藏
显式地将主体宽度设置为步骤1中的宽度。
Var $body = $(document.body);
var oldWidth = $body.innerWidth();
美元body.css(“溢出”,“隐藏”);
美元body.width (oldWidth);
关闭模态:
将body overflow设置为auto
将车身宽度设置为auto
Var $body = $(document.body);
美元body.css(“溢出”,“汽车”);
美元body.width(“自动”);
灵感来源:http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php
Bootstrap的模态在模态对话框显示时自动将类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部分。
/* =============================
* 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(); });
});