Disable Scrolling scrolls to top when image is clicked.

Why does clicking the image to open the modal scrolls the page to the top when disableScrolling is true?

To produce the following bug, go to Lightbox Examples, open the console, and enter the following.

lightbox.option({ disableScrolling: true });

Then before clicking an image, scroll so that you’re not at the top of the page but you should still see the image (so you could click it tho).

After clicking, you can see that the modal opens but the page scrolls up, leaving the modal down there! Are there other things that I should do when implementing disableScrolling?

[jrpeters89]

It looks like the class “.lb-disable-scrolling” is the issue. I commented out the “position: fixed;” attribute and it seems to be working fine now on desktop.

html.lb-disable-scrolling {
  overflow: hidden;
  /* Position fixed required for iOS. Just putting overflow: hidden; on the body is not enough. */
  //position: fixed;
  height: 100vh;
  width: 100vw;
}

The author put a note in here though saying position: fixed is required for iOS. I am going to add this to the css to see if I can make it work on iOS as well (haven’t tested yet):

@supports (-webkit-overflow-scrolling: touch) {
  /* CSS specific to iOS devices */
  html.lb-disable-scrolling {
    /* Position fixed required for iOS. Just putting overflow: hidden; on the body is not enough. */
    position: fixed;
  }
}

[ashok-2695]

Just Add below line to your lightbox-plus-jquery.min.js file .

lightbox.option({ disableScrolling: true });