jQuery Fantasybox2/fancybox 导致页面跳转到顶部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13547007/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
fancybox2 / fancybox causes page to to jump to the top
提问by sheriffderek
I have implemented fancybox2 on a dev site.
我在开发站点上实现了fancybox2。
When I engage the fancybox (click the link etc) the whole html shifts behind it - and goes to the top. I have it working fine in another demo, but when I drag the same code to this project it jumps to the top. Not only with the links to inline divs, but also for simple image gallery.
当我使用fancybox（单击链接等）时，整个html 会移到它后面 - 并转到顶部。我在另一个演示中运行良好，但是当我将相同的代码拖动到该项目时，它会跳到顶部。不仅包含指向内联 div 的链接，还包含简单的图片库。
Has anyone experienced this?
有没有人经历过这个？
回答by Dave Kiss
This can actually be done with a helper in Fancybox 2.
这实际上可以通过 Fancybox 2 中的助手来完成。
$('.image').fancybox({
helpers: {
overlay: {
locked: false
}
}
});
http://davekiss.com/prevent-fancybox-from-jumping-to-the-top-of-the-page/
http://davekiss.com/prevent-fancybox-from-jumping-to-the-top-of-the-page/
回答by fast-reflexes
Jordanj77 is correct but easiest solution is to just go to stylesheet jquery.fancybox.cssand comment out the row saying overflow: hidden !important;in section .fancybox-lock
Jordanj77 是正确的，但最简单的解决方案是转到样式表jquery.fancybox.css并注释掉overflow: hidden !important;部分中的行.fancybox-lock
回答by Joeran
I realize this is an old question, but I think I have found a good solution for it. The problem is that fancy box changes the overflow value of the body in order to hide the browser scrollbars.
我意识到这是一个老问题，但我想我已经找到了一个很好的解决方案。问题是花式框改变了主体的溢出值以隐藏浏览器滚动条。
As Dave Kiss points out, we can stop fancy box from doing this by adding the following parameters:
正如 Dave Kiss 所指出的，我们可以通过添加以下参数来阻止花哨的盒子这样做：
$('.image').fancybox({
padding: 0,
helpers: {
overlay: {
locked: false
}
}
});
But, now we can scroll the main page while looking at our fancy box window. It is better than jumping to the top of the page, but it is probably not what we really want.
但是，现在我们可以在查看我们漂亮的框窗口的同时滚动主页。这比跳到页面顶部要好，但这可能不是我们真正想要的。
We can prevent scrolling the right way by adding the next parameters:
我们可以通过添加以下参数来防止以正确的方式滚动：
$('.image').fancybox({
padding: 0,
helpers: {
overlay: {
locked: false
}
},
'beforeLoad': function(){
disable_scroll();
},
'afterClose': function(){
enable_scroll();
}
});
And add these functions from galambalaz. See: How to disable scrolling temporarily?
并从 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;
}
回答by jordanj77
The problem is that fancyBox changes the overflow value of the body in order to hide the browser scrollbars. I couldn't find an option to toggle this behavior.
问题是fancyBox 改变了body 的overflow 值以隐藏浏览器滚动条。我找不到切换此行为的选项。
You could remove this section of the fancyBox code to prevent it:
您可以删除fancyBox代码的这一部分以防止它：
if (obj.locked) {
this.el.addClass('fancybox-lock');
if (this.margin !== false) {
$('body').css('margin-right', getScalar( this.margin ) + obj.scrollbarWidth);
}
}
回答by thexpand
Despite the fact, that the proper way of solving this problem is via the options, which fancybox provides (refer to this answer), CSS could be used to solve the problem. There is no need to edit the library's css file, just add this to the main stylesheet of the application:
尽管事实上，解决这个问题的正确方法是通过fancybox 提供的选项（参考这个答案），CSS 可以用来解决这个问题。无需编辑库的 css 文件，只需将其添加到应用程序的主样式表中即可：
html.fancybox-lock {
overflow: visible !important;
}
The code resets the original overflow of the element. The problem is that overflow: hidden;hides the scrollbar on the <html>element, which causes the page to "jump" to the top. In order to preserve the position of the scrollbar, we overwrite the overflow with overflow: visible;
该代码重置元素的原始溢出。问题是overflow: hidden;隐藏了<html>元素上的滚动条，导致页面“跳”到顶部。为了保留滚动条的位置，我们用overflow: visible;
回答by hsobhy
This also helped
这也有帮助
.fancybox-lock body {
overflow: visible !important;
}
回答by Ian
The accepted answer is not complete as it does not actually solve the problem it just avoids it! Here is a more complete answer that actually gives you the desired functionality while fixing the window jump issue:
接受的答案并不完整，因为它实际上并没有解决它只是避免它的问题！这是一个更完整的答案，它实际上在修复窗口跳转问题的同时为您提供了所需的功能：
$('.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');
}
});
回答by Nahomy Atias
Maybe this answer is alil late but maybe it could help in the future, if after clicling/closing a image fancybox makes your website scroll to the top, you could just delete the :
也许这个答案很晚，但也许它可以在将来有所帮助，如果在单击/关闭图像fancybox后使您的网站滚动到顶部，您可以删除：
F.trigger('onReady');
or better use:
或更好地使用：
/*F.trigger('onReady');*/
In fancyBox version: 2.1.5 (Fri, 14 Jun 2013) that part of the code is at line 897.
在fancyBox 版本：2.1.5（2013 年6 月14 日星期五）中，该部分代码位于第897 行。
回答by Steele Rocky
You can actually code like this if you are using fancybox default function:
如果您使用的是fancybox默认函数，您实际上可以这样编码：
$(document).ready(function() {
$(".fancybox").fancybox({
padding: 0,
helpers: {
overlay: {
locked: false
}
}
});
});
回答by user2684988
I fixed it with:
我修复了它：
overflow: hidden !important;
in .fancybox-lockbody in jquery.fancybox.css. And scrollbar not jumping :)
在.fancybox-lock体内jquery.fancybox.css。和滚动条不跳:)
