Fancy Box 2 - Window jumping to top on click

Question

This is my first time implementing FancyBox in a project for me. I have separated the image from the link. So when you hover over the image the link to view the large image appears. Everything there works fine. My issues is the window keeps jumping/scrolling to the top when the link is clicked. I have used jquery to disable the default action of it by using preventDefault but that didn't solve my issue. Any suggestions? You can see what I'm trying to accomplish at www.labpixls.com

I need to resolve this soon. I am creating a wordpress theme I plan on giving to the wp community.

It's broken for me in Chrome 29.latest. Scroll position goes to top and doesn't go back down after closing the image popup. Can you run Fancybox in a different mode? The example on http://fancybox.net/ works fine for me. It doesn't add the strange classes to the body. — Halcyon, Sep 25 '13 at 15:17
The issue has been fixed in the last commit that you can download from here https://github.com/fancyapps/fancyBox/archive/master.zip (fancybox v2.1.5) ... the issue is created when the `html` and the `body` tags have a `height` of `100%` — JFK, Sep 25 '13 at 16:25
@FritsvanCampen : for the record http://fancybox.net/ is for fancybox v1.3.4, which is different than the version used by the OP — JFK, Sep 25 '13 at 16:27
Thanks Everyone. I will try the new version and report back. — Jason Arroyo, Oct 02 '13 at 16:01

score 8 · Answer 1 · answered Nov 28 '13 at 07:00

The problem is that fancyBox changes the overflow value of the body in order to hide the browser scrollbars. This can actually be done with a helper in Fancybox 2.

$('.image').fancybox({
  padding: 0,
  helpers: {
    overlay: {
      locked: false
    }
  }
});

score 4 · Answer 2 · edited May 23 '17 at 11:45

I realize this question has been asked a while ago, 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 Thorn 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;  
    }

Fancy Box 2 - Window jumping to top on click

2 Answers2