Fancybox update() function reseting my scroll

Question

I have a fancybox popup in which I have multiple accordions. So the size of the popup varies on clicking of these accordions. Each of the accordion is an anchor tag.

On expanding one or more accordions, there is a limit(max-height) to which my popup will expand, after which the content inside the popup becomes scrollable, i.e, the content inside the div with class .fancybox-inner .

Whenever an accordion is clicked I call $.fancybox.update() as the popup need to be re-sized and respositioned.

But $.fancybox.update() resets the current scroll position of the content inside popup.

So i made this function adjustPopup and call it when any of the accordion is clicked

function adjustPopup(target) {
    var fancyboxInner = $('.fancybox-inner')[0], 
        scrollTop = fancyboxInner.scrollTop;

    //$.fancybox.update() function resets the vertical scroll of fancybox popup, so we store the
    //scrollTop before calling $.fancybox.update() and then assign it back when updated.
    $.fancybox.update();
    fancyboxInner.scrollTop = scrollTop;
}

But this doesn't work. Even though i set the proper scrollTop value its again reset to 0 somehow. Does anyone know whats the issue here?

Could you elaborate `loses the current scroll position of the popup`? do you mean the entire page (behind fancybox) somehow scrolls to another position? are you using inline content? — JFK, Nov 05 '14 at 17:12
@JFK: No. I am talking about the content inside the fancybox popup. On expanding one or more accordions, there is a limit(max-height) to which my popup will expand, after which it scrolls. — shinobi, Nov 06 '14 at 06:23
@JFK: I have edited the question for better understanding. Please have a look. I am poor at reputation else would have set bounty :p — shinobi, Nov 06 '14 at 06:29

score 1 · Accepted Answer · answered Nov 06 '14 at 12:24

I found the solution. I had to dig into $.fancybox.update() function where I found that this function does stuff asynchronously. So my scroll was getting reset even though I was setting the scroll right after calling update.

I realized that there is an event 'onUpdate' on which the update is actually completed.

So I modified my adjustPopup function to this:

function adjustPopup(target) {
    var fancyboxInner = $('.fancybox-inner')[0], 
        scrollTop = fancyboxInner.scrollTop;

    //$.fancybox.update() function resets the vertical scroll of fancybox popup, so we store the
    //scrollTop before calling $.fancybox.update() and then assign it back when updated.
    $.fancybox.one('onUpdate', function() {
        fancyboxInner.scrollTop = scrollTop;
    });
    $.fancybox.update();
}

Thanks to everyone who might have put time into this.

What versions of Fancybox and jQuery do you use in this solution please? — Martin, Feb 28 '16 at 12:09

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

0

According to this answer and Fancybox forum this works:

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

edited May 23 '17 at 11:45

Community

1
1

answered Feb 28 '16 at 12:16

Martin

5,674
8
37
56

Fancybox update() function reseting my scroll

2 Answers2