我想让我的身体在使用鼠标滚轮时停止滚动,而我的网站上的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
因为对我来说,这个问题主要出现在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;
});
}
大部分的片段都在这里,但我没有看到任何答案把它们放在一起。
这个问题有三个方面。
(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绑定应用到全屏覆盖。