Fancybox2/fancybox 使页面跳到顶部

小开

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);
}
}

小开

最佳答案

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/

小开

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

小开

I fixed it with:

overflow: hidden !important;

in .fancybox-lock body in jquery.fancybox.css. And scrollbar not jumping :)

小开

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.

小开

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: 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;
}

小开

This also helped

.fancybox-lock body {
overflow: visible !important;
}

小开

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;

小开

You can actually code like this if you are using fancybox default function:

    $(document).ready(function() {
$(".fancybox").fancybox({
padding: 0,
helpers: {
overlay: {
locked: false
}
}
});
});

小开

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');
}
});

小开

Also you can try it with this approach!

$.fancybox({
beforeShow: function () {
$("body").css({ 'overflow': 'hidden' });
},
afterClose: function () {
$("body").css({ 'overflow-y': 'visible' });
},
});