fancybox2 / fancybox causes page to to jump to the top
JqueryCssFancybox 2Jquery Problem Overview
I have implemented fancybox2 on a dev site.
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.
Has anyone experienced this?
Jquery Solutions
Solution 1 - Jquery
This can actually be done with a helper in Fancybox 2.
$('.image').fancybox({
helpers: {
overlay: {
locked: false
}
}
});
http://davekiss.com/prevent-fancybox-from-jumping-to-the-top-of-the-page/
Solution 2 - Jquery
Jordanj77 is correct but easiest solution is to just go to stylesheet jquery.fancybox.css and comment out the row saying overflow: hidden !important; in section .fancybox-lock
Solution 3 - Jquery
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:
$('.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: https://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily
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;
}
Solution 4 - Jquery
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.
You could remove this section of the fancyBox code to prevent it:
if (obj.locked) {
this.el.addClass('fancybox-lock');
if (this.margin !== false) {
$('body').css('margin-right', getScalar( this.margin ) + obj.scrollbarWidth);
}
}
Solution 5 - Jquery
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:
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;
Solution 6 - Jquery
This also helped
.fancybox-lock body {
overflow: visible !important;
}
Solution 7 - Jquery
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');
}
});
Solution 8 - Jquery
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 :
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.
Solution 9 - Jquery
You can actually code like this if you are using fancybox default function:
$(document).ready(function() {
$(".fancybox").fancybox({
padding: 0,
helpers: {
overlay: {
locked: false
}
}
});
});
Solution 10 - Jquery
Also you can try it with this approach!
$.fancybox({
beforeShow: function () {
$("body").css({ 'overflow': 'hidden' });
},
afterClose: function () {
$("body").css({ 'overflow-y': 'visible' });
},
});
Solution 11 - Jquery
I fixed it with:
overflow: hidden !important;
in .fancybox-lock body in jquery.fancybox.css. And scrollbar not jumping :)