我想让我的身体在使用鼠标滚轮时停止滚动,而我的网站上的Modal(来自http://twitter.github.com/bootstrap)是打开的。
当模式被打开时,我试图调用下面的javascript片段,但没有成功
$(window).scroll(function() { return false; });
AND
$(window).live('scroll', function() { return false; });
请注意,我们的网站放弃了对IE6的支持,IE7+需要兼容。
您需要超越@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
不能让它在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);
});
这个问题已经解决,
解决方案:只需打开bootstrap .css并按以下方式更改
body.modal-open,
.modal-open .navbar-fixed-top,
.modal-open .navbar-fixed-bottom {
margin-right: 15px;
}
to
body.modal-open,
.modal-open .navbar-fixed-top,
.modal-open .navbar-fixed-bottom {
/*margin-right: 15px;*/
}
请查看下面的youtube视频,只有不到3分钟,你的问题将解决…
https://www.youtube.com/watch?v=kX7wPNMob_E