how to prevent scrolling of page behind fancybox-2

Question

We are using fancybox2 for displaying images. Everything works well, but when the larger image is displayed in the fancybox, the page behind scrolls to the top. After closing the fancybox the user has to scroll back downwards to the position, where he opened the box. The examples on the fancybox2 Site do not show this behaviour. I could not find out, where is the difference to make this happen.

fancyOptions = {
  type: 'image',
  closeBtn: false,
  autoSize: false,
  scrolling: 'no',
  type: 'image',
  padding: [10,10,10,10],  
  beforeLoad: function(){
    this.title = getTitle(this);
    this.href = $(this.element).closest('a').attr('href');
  },
  helpers: {
    overlay: {
      css: {
        'background': 'rgba(0, 0, 0, 0.7)'
      },
    },
    title: {
      type: 'inside'
    }
  }
};

We are using fancybox2 as a module within require.js. The .fancybox() call is in a $(document).ready block.

There where 2 scrollbars and I hid one with css

.fancybox-overlay {
overflow: hidden !important;
}

Working solution by hiding the scrollbars: http://stackoverflow.com/a/13424120/216084 — , Sep 10 '14 at 05:32

score 21 · Answer 1 · edited May 23 '17 at 11:47

21

Apparently, Fancybox changes the CSS property overflow on body element to hidden when a picture is showed. This causes the background to scroll back to the top. All you have to do is comment out the row saying overflow: hidden !important; in section .fancybox-lock in stylesheet jquery.fancybox.css.

Please see fancybox2 / fancybox causes page to to jump to the top as well.

edited May 23 '17 at 11:47

Community

1
1

answered Jul 03 '13 at 21:14

fast-reflexes

2,146
2
23
32

This worked for me - now the body keeps the scroll position, but is locked so there won't be any double scrolling in case of scroll in the modal popup. Nice, than's fast-reflexes. :) – kasperwf Jul 08 '13 at 09:52
2

Thank you. I... I love you. – Leng Sep 05 '15 at 04:11

score 18 · Answer 2 · answered Apr 09 '14 at 08:32

This is working fine for me:

Add follow functions in facnybox initialization

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

Example:

$(".fancyBoxTrigger").fancybox({
    maxWidth    : 820,
    maxHeight   : 670,
    fitToView   : false,
    width       : 760,
    height      : 580,
    autoSize    : false,
    closeClick  : false,
    openEffect  : 'none',
    closeEffect : 'none',
    padding     : 10,
    closeBtn    : false,
    beforeShow: function(){
        $("body").css({'overflow-y':'hidden'});
    },
    afterClose: function(){
        $("body").css({'overflow-y':'visible'});
    },
    helpers : {
        overlay : {
            opacity: 0.4,
            locked: false
        }
    }
});

I hope it will work for you.

Perfectly elegant programmatic solution without the need to modify the CSS file. This should be the accepted answer. — Terry Carter, Jan 04 '18 at 17:27

SimCity · Answer 3 · 2013-07-02T13:29:47.933

4

This worked for me :

$.fancybox({
        scrolling   : 'hidden',
        helpers: {
            overlay: {
              locked: true 
            }
        });

Hope it helps :)

edited Jul 02 '13 at 13:29

answered Jul 02 '13 at 01:25

SimCity

479
2
7
18

Hi, it may be me, but I can't seem to find these options documented. Could you share a link to the documentation of these options? – Bertvan Jul 02 '13 at 15:20
To stop the scrolling, it should be set to `false`, not `true`. See: http://stackoverflow.com/a/15306863/594235 – Sparky Nov 20 '15 at 19:27

JFK · Answer 4 · 2013-08-13T00:59:09.100

3

My guess? The selector you click to fire fancybox is most likely an anchor with a hashmark like :

<a href="#">

then you get the fancybox's href from the closest <a> element, as in your code :

  beforeLoad: function(){
    this.title = getTitle(this);
    this.href = $(this.element).closest('a').attr('href');
  }

Here is a DEMO that reproduces the behavior you are describing (scroll the content down until you find the thumbnail that fires fancybox)

If what I assumed above is correct, then your possible solutions are :

1). Change the hashmark in your anchor's href attribute to the hashtag #nogo like <a href="#nogo">

as referred by Stuart Nicholls (cssplay) in his update of 15th March 2005 in the linked post.

2). Or replace the hashmark in your anchor's href attribute by javascript:; like <a href="javascript:;">

See updated JSFIDDLE using the first option.

edited Aug 13 '13 at 00:59

answered Mar 26 '13 at 08:07

JFK

40,294
31
126
295

We are using the construction with this.title and this.href because of a wrapper, we build around the link, to show a little tiny loupe in the right bottom edge of the image. So the user can distinguish if the image can be displayed in a fancybox. The link has a real url to a bigger image and no hashtag. – tomsteg Mar 26 '13 at 08:30
@user2210437 can you share a link to see the behavior? – JFK Mar 26 '13 at 15:22
Sorry, the relaunch is not online now, but will be with or without this bug middle of April. – tomsteg Mar 27 '13 at 07:29
1

They're called "fragments" not "hashtags". Jeez. – Christian Aug 12 '13 at 21:57
@Christian : in this case (IF the assumption in my answer is true), they are not "fragment identifiers" because they are not pointing to any section in the document so they are simply `hashmark`... the word `#nogo` on the other hand is a `hashtag`. I edited my answer to avoid confusion. – JFK Aug 13 '13 at 00:55

score 1 · Answer 5 · edited May 23 '17 at 12:10

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

score 0 · Answer 6 · answered Mar 26 '13 at 07:11

0

You may try this :-

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

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

}

It stops the vertical scrolling on the parent page while fancybox is open.

answered Mar 26 '13 at 07:11

Ravindra Shekhawat

116
2
10

I don't think you really understood the question. The issue is after closing fancybox, the parent page has already scrolled to the top. – JFK Mar 26 '13 at 07:20
That did not help. Nothing is changing. – tomsteg Mar 26 '13 at 07:40
Sorry, the relaunch is not online now, but will be with or without this bug middle of April. – tomsteg Mar 27 '13 at 07:02
Our Website is now online and we have not fixed the problem with the scrolling background using fancybox2 image. Here is a link to a page where the fancybox2 is used: https://agenda-kunden.de/faq-fibu-allgemein.htm To see the content you have got to register. The typical fancybox images are those with the loupe. We still have no clue, why the page in the background scrolls to the top. – tomsteg Apr 30 '13 at 05:52

score 0 · Answer 7 · answered Sep 16 '13 at 19:38

0

In jquery.fancybox.css -> .fancybox-lock
change:
overflow: hidden !important;
to:
overflow: visible !important;
works for me :)

answered Sep 16 '13 at 19:38

Martin Filek

83
1
1
6

This is editing the core file of a plugin - We cannot call it a recommended technique unless no other method gets the job done. :) – Sep 10 '14 at 05:27

score 0 · Answer 8 · answered Sep 15 '15 at 10:23

My modification, this help me

/* Fancybox */
$('.fancybox').fancybox({
    beforeShow: function(){
        $("body").css({
            "overflow-y": "hidden",
            "position": "fixed"
            }
        );
    },
    afterClose: function(){
        $("body").removeAttr("style");
    }
});

score 0 · Answer 9 · answered Apr 25 '16 at 14:11

$('.fancybox').fancybox({
 'beforeLoad': function(){
   disable_scroll();
    },
 'afterClose': function(){
   enable_scroll();
  }
});

var disabled_scroll = false;

function disable_scroll() {
  disabled_scroll = true;
}

function enable_scroll() {
  disabled_scroll = false;
}

in fullPage.js

function scrollPage(element, callback, isMovementUp)
{
   if(disabled_scroll) return;
   .....
}

how to prevent scrolling of page behind fancybox-2

9 Answers9

Linked