The Fancybox popup consistently stays at the forefront while scrolling

Question

The Fancybox popup consistently stays at the forefront while scrolling

After integrating the fancybox plugin into my website, I encountered an issue that needs attention:

Whenever I click on an image, it opens correctly but unexpectedly scrolls to the top of the page, preventing me from scrolling down while the popup is displayed. The problem can be observed on my website here.

I attempted to resolve this by utilizing the "scrollOutside" option, but unfortunately, it did not rectify the situation.

Your assistance with this matter would be greatly appreciated. Thank you!

javascript jquery html css fancybox

Answer 1

Answer №1

Just a heads up before I share my solution, the scrolling issue is not related to fancybox itself. You can easily verify this by testing it in the browser console on other pages:

$.fancybox("test");

On this particular page, there are multiple scrollable <div> sections. You might need to scroll back to the correct section. Below is the solution for scrolling back.

Firstly, we save the current page when you click on it.

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

Now, you can easily scroll back to that page whenever needed. For example, using the onClosed event:

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

If this doesn't seem to work, feel free to inform me.

Answer 2

Just a heads up before I share my solution, the scrolling issue is not related to fancybox itself. You can easily verify this by testing it in the browser console on other pages:

$.fancybox("test");

On this particular page, there are multiple scrollable <div> sections. You might need to scroll back to the correct section. Below is the solution for scrolling back.

Firstly, we save the current page when you click on it.

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

Now, you can easily scroll back to that page whenever needed. For example, using the onClosed event:

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

If this doesn't seem to work, feel free to inform me.

Answer 3

Answer №2

Your CSS has a specific selector causing the issue that needs to be addressed.

html , body {
    height: 100%;
}

If you remove html from this rule, it should solve the problem. When setting 100% height for the <html> tag, the overflow behavior may not function as expected.

Alternatively, you can apply inline styles directly to the <html> tag by setting height: auto;. Try this out in your console and test scrolling when viewing an image to see the difference in behavior.

Answer 4

Your CSS has a specific selector causing the issue that needs to be addressed.

html , body {
    height: 100%;
}

If you remove html from this rule, it should solve the problem. When setting 100% height for the <html> tag, the overflow behavior may not function as expected.

Alternatively, you can apply inline styles directly to the <html> tag by setting height: auto;. Try this out in your console and test scrolling when viewing an image to see the difference in behavior.

The Fancybox popup consistently stays at the forefront while scrolling

Answer №1

Answer №2

Similar questions

Semi-transparent image

Display elements exclusively when the class XY is in an active state using JavaScript

Iterating over images and displaying them in Laravel's blade templating engine, updating outdated Angular code

Transforming HTML with JavaScript

The query attribute of the http_incomingmessage in Node.js is not empty, causing Express to have trouble parsing the query parameter

Why is Django not recognizing my ajax request when using the `is_ajax()` function?

Guide to building a dual recursion menu in AngularJS using both functional and template methods

Is it possible to incorporate a label within a dropdown menu (<select>)?

The script fails to start using npm start, however, it runs smoothly when using node server.js

Unforeseen Extra Information is being transmitted along with Socket.io and Jquery

How to increase the ng-repeat index value in HTML

What are some strategies for improving search efficiency in arrays containing over 50,000 elements?

Headers cannot be reset after being sent while attempting to log in a user

Error encountered in Express Router middleware (`app.use() function must be provided with a middleware function`)

What is the solution to preventing Angular 1.3 ngMessages from affecting the size of my form?

Tracking changes in local storage through mapped React components

Foundation 6 Websites - Dropdown Automatically Close When Clicked

Tips for adjusting CSS font sizes within a contenteditable element?

I encountered an issue while attempting to link my project to a database. An error popped up stating that the name 'textbox' does not exist in the current context

What steps are needed to adjust a modal window so that it perfectly fits the size of the image it contains?