Prevent background scrolling on open of lightbox

Question

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 1

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

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