Fancybox popup always scrolls on top

999 Views Asked by alexpriftuli At 17 April 2025 at 10:08

I have implemented the fancybox plugin in my website, but I noticed this issue:

Every time I click an image, it opens the image correctly, but it always scrolls on top of the website, and does'nt let me scroll down when the popup is opened. You can see this issue in my website here.

I tried using the option "scrollOutside", but it doesn't work.

Thank you very much for your help!

Original Q&A

There are 2 best solutions below

Mehdi On 13 June 2015 at 15:29 BEST ANSWER

Before going to my solution, notice that the scrolling is not the fancybox issue itself. You can basically test it through browser console in all other pages:

$.fancybox("test");

In this webpage, you have several <div> as scrollable pages. Maybe you can scroll back to the right page. I writ the scroll back solution.

First we need to save the page when you click it.

var thisPage = "homepage";
$(".page").click(function(){
    thisPage = $(this).attr("id");
});

Now you can scroll back to the page whenever you want. For instance onClosed:

$("a.inline").fancybox({
    // ... other configurations ...
    'onClosed' : function() {
        $("html,body").scrollTop($("#"+thisPage).offset().top);
    }
});

Let me know if it didn't work.

Vinay Aggarwal On 13 June 2015 at 15:12

You have the following selector in your css, which is causing the issue.

html , body {
    height: 100%;
}

if just remove html here, it'll work. The thing is when 100% height is given to <html> tag, overflow doesn't work the way you need.

Or alternative option is give inline style to <html> tag and set height: auto;. Open your console and then try opening an image, it won't scroll to top.

Fancybox popup always scrolls on top

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in HTML

Related Questions in CSS

Related Questions in FANCYBOX

Trending Questions

Popular # Hahtags

Popular Questions