Reputation: 9043

fancybox2 / fancybox causes page to to jump to the top

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?

Upvotes: 111

Answers (11)

Optimaz Prime

Reputation: 937

Also you can try it with this approach!

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

Upvotes: 0

Ian

Reputation: 653

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

Upvotes: 1

Steele Rocky

Reputation: 641

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

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

Upvotes: 0

thexpand

Reputation: 641

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;

Upvotes: 7

Dave Kiss

Reputation: 10485

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/

Upvotes: 337

hsobhy

Reputation: 1523

This also helped

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

Upvotes: 4

Joeran

Reputation: 888

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

Upvotes: 14

Nahomy Atias

Reputation: 203

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.

Upvotes: 0

user2684988

Reputation: 27

I fixed it with:

overflow: hidden !important;

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

Upvotes: -4

fast-reflexes

Reputation: 5186

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

Upvotes: 35

jordanj77

Reputation: 243

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

Upvotes: 10

fancybox2 / fancybox causes page to to jump to the top

Answers (11)

Related Questions