Rob Rob - 23 days ago 7
CSS Question

Prevent background scrolling on open of lightbox

I'm using Featherlight as a lightbox. One problem I have is that went it opens, the background remains scrollable. A fix that most lightboxes need is adding a class to the body with

overflow:hidden;
on it.

How can I do that on open of the lightbox, then remove the class on close?

Answer

You can use the options on your plugin call by using of the beforeOpen and afterClose options like:

$.featherlight($content, {
    beforeOpen: function() {
        document.body.style.overflow = 'hidden';
    },
    afterEnd: function() {
        document.body.style.overflow = '';
    }
});