3

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?

Rob
  • 5,632
  • 22
  • 69
  • 154
  • https://github.com/noelboss/featherlight/#configuration - this part of the documentation reveals all the callbacks on which you can bind for achieving this... – Samuil Petrov Nov 16 '16 at 11:34
  • http://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily you don't wanna do overflow:hidden as this hides the scroll bars and can cause a repaint (which is slow) – Andrew Bone Nov 16 '16 at 11:46
  • Andrew! I see you have a real bee in your bonnet about the scroll bars being hidden and causing a repaint (since you've posted the same thing 3x, on the question here and two answers below:) Do you have a better solution?? – Rick Davies Nov 03 '18 at 06:54

2 Answers2

2

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 = '';
    }
});
Rob
  • 5,632
  • 22
  • 69
  • 154
RWAM
  • 5,949
  • 3
  • 32
  • 41
0

You can try below steps:

1) Add new CSS class as:

.bodyNoOverflow{
    overflow:hidden;
}

2) Modify the Featherlight widget initialization configuration and modify the beforeOpen and beforeClose callback function as:

beforeOpen: function(event){

    $("body").addClass("bodyNoOverflow");
    //existing code if any
},

beforeClose: function(event){

    $("body").removeClass("bodyNoOverflow");
    //existing code if any
},
vijayP
  • 11,262
  • 5
  • 21
  • 37