fancybox2 / fancybox导致页面跳转到顶部
我已经在dev站点上实现了fancybox2。
当我使用fancybox（点击链接等）时，整个HTML会移到它后面，然后跳到顶部。 我在另一个演示中工作正常，但是当我将相同的代码拖到这个项目时，它跳转到顶部。 不仅与内联div的链接，而且对于简单的图像库。
有没有人经历过这个？
这实际上可以用Fancybox 2中的帮手完成。
$('.image').fancybox({ helpers: { overlay: { locked: false } } }); http://davekiss.com/prevent-fancybox-from-jumping-to-the-top-of-the-page/
Jordanj77是正确的，但最简单的解决scheme是去样式表jquery.fancybox.css和注释掉溢出的行overflow: hidden !important; 在部分.fancybox-lock
我意识到这是一个老问题，但我认为我find了一个很好的解决scheme。 问题是，花式框改变身体的溢出值，以隐藏浏览器的滚动条。
正如Dave Kiss所指出的那样，我们可以通过添加以下参数来阻止花式框的操作：
$('.image').fancybox({ padding: 0, helpers: { overlay: { locked: false } } });
但是，现在我们可以滚动主页面，同时看着我们的花式窗口。 这比跳到页面顶部要好，但可能不是我们真正想要的。
我们可以通过添加下面的参数来防止正确的滚动方式：
$('.image').fancybox({ padding: 0, helpers: { overlay: { locked: false } }, 'beforeLoad': function(){ disable_scroll(); }, 'afterClose': function(){ enable_scroll(); } });
并从galambalaz中添加这些函数。 请参阅： 如何暂时禁用滚动？
var keys = [37, 38, 39, 40]; function preventDefault(e) { e = e || window.event; if (e.preventDefault) e.preventDefault(); e.returnValue = false; } function keydown(e) { for (var i = keys.length; i--;) { if (e.keyCode === keys[i]) { preventDefault(e); return; } } } function wheel(e) { preventDefault(e); } function disable_scroll() { if (window.addEventListener) { window.addEventListener('DOMMouseScroll', wheel, false); } window.onmousewheel = document.onmousewheel = wheel; document.onkeydown = keydown; } function enable_scroll() { if (window.removeEventListener) { window.removeEventListener('DOMMouseScroll', wheel, false); } window.onmousewheel = document.onmousewheel = document.onkeydown = null; }
问题是，fancyBox更改身体的溢出值，以隐藏浏览器滚动条。 我无法find切换此行为的选项。
你可以删除这一部分的fancyBox代码来防止它：
if (obj.locked) { this.el.addClass('fancybox-lock'); if (this.margin !== false) { $('body').css('margin-right', getScalar( this.margin ) + obj.scrollbarWidth); } }
尽pipe如此，解决这个问题的正确方法是通过fancybox提供的选项（ 参考这个答案 ），CSS可以用来解决这个问题。 不需要编辑库的css文件，只需将其添加到应用程序的主样式表即可：
html.fancybox-lock { overflow: visible !important; }
该代码重置元素的原始溢出。 问题是， overflow: hidden; 隐藏<html>元素上的滚动条，这会导致页面跳转到顶部。 为了保持滚动条的位置，我们用overflow: visible;覆盖overflow: visible;
这也有帮助
.fancybox-lock body { overflow: visible !important; }
接受的答案是不完整的，因为它实际上并没有解决它只是避免它的问题！ 这是一个更完整的答案，它可以在解决窗口跳跃问题的同时提供所需的function：
$('.fancybox').fancybox({ helpers: { overlay: { locked: false } }, beforeShow:function(){ $('html').css('overflowX', 'visible'); $('body').css('overflowY', 'hidden'); }, afterClose:function(){ $('html').css('overflowX', 'hidden'); $('body').css('overflowY', 'visible'); } });
也许这个答案是晚了，但也许它可以帮助未来，如果在拼图/closures图像fancybox使您的网站滚动到顶部，您可以删除：
F.trigger('onReady');
或更好地使用：
/*F.trigger('onReady');*/
在fancyBox版本2.1.5（2013年6月14日星期五），代码的一部分在897行。
如果你正在使用fancybox的默认function，你可以这样编码：
$(document).ready(function() { $(".fancybox").fancybox({ padding: 0, helpers: { overlay: { locked: false } } }); });
我修正了它：
overflow: hidden !important;
在.fancybox-lock中的.fancybox-lock正文中。 和滚动不跳:)
