Disable Scrolling scrolls to top when image is clicked.

[wreighsantos]

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;
  }
}

[spdivn]

html.lb-disable-scrolling {
  overflow: hidden;
  position: static;
  height: 100vh;
  width: 100vw;
}

position static work in iOS device and you can't scroll.

@jrpeters89 @lokesh @wreighsantos

[SimranMalhotra]

Just add this script to disable scrolling in lighbox

<script> lightbox.option({ disableScrolling:true }) </script>

[lokesh]

Should be fixed in v2.11.0: https://github.com/lokesh/lightbox2/releases/tag/v2.11.0

Please reopen if issue persists for anyone.

[rajjanorkar]

This is still an issue in 2.11.1 version. When first image is clicked it is scrolling top.

[kevinlo123]

There is a bug when using this package on IE11. When anchor element is clicked the screen jumps to the top of the page. This issue was found using browserstack to test website on IE11 windows. I also tested on http://lokeshdhakar.com/projects/lightbox2/#examples to make sure it just wasnt the website im working on and same issue persists.

[lokesh]

Does this issue happen irregardless of the disableScrolling value? I'm going to use browserstack and verify later this week, in-transit for a bit.

Related: #667 (comment)

[rajjanorkar]

Yes, either true or false. For me i can replicate on latest Google chrome and Firefox

…

On Wed, 4 Sep. 2019, 10:08 am Lokesh Dhakar, ***@***.***> wrote: More info: #667 (comment) <#667 (comment)> Does this issue happen irregardless of the disableScrolling value? I'm going to use browserstack and verify later this week, in-transit for a bit. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#620?email_source=notifications&email_token=ABZHIJTQ2GN3V2SV5I2WVPDQH34BJA5CNFSM4EPA5MDKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD5Z5XSY#issuecomment-527686603>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABZHIJV5HFCOHR63CRKOXT3QH34BJANCNFSM4EPA5MDA> .

[eding42]

Yeah, can also reproduce on chrome and firefox.

[tristonb2049]

I am having trouble with this issue as well still. Even when set to true, it will still scroll to top on iPhone safari use.

[alexeichemenda]

I encountered the same issue while playing with the latest version, and I noticed that this happens only when I set the resizeDuration to 0. (during all of my tests, I had the disableScrolling = true option). The solution for me was to set the resizeDuration to anything greater than 0, so I went with 1.

Hope this helps you find the issue @lokesh !

[emmahsax]

Yes this is an issue for me as well. However, the default of resizeDuration should already be set to 700, per the Options in the documentation. I tried setting the resizeDuration to 1 just to see if that fixed it, and it looks like it does not.

@lokesh The issue is also on the examples as well, so I think it's reproducible on almost every browser.

Thing to note is that it doesn't happen every time I open the image. The best way for me to see it is to open fresh a page, scroll to the image straight away, and then click the problematic image right away.

[theHacker]

Thing to note is that it doesn't happen every time I open the image. The best way for me to see it is to open fresh a page, scroll to the image straight away, and then click the problematic image right away.

This describes it very good.

I am having the issue on a Chromium browser (v84.0.4147.105) and with disableScrolling left to default false.
Since I do not like animations on my websites I set options

fadeDuration: 1,
imageFadeDuration: 1,
resizeDuration: 1

I also tried disabledScrolling = true. You can reproduce the issue with this setting as well. After clicking an image, the page scrolls top, so you don't see the Lightbox, but then you can't scroll down again. - So disabledScrolling seems completely indepedent of this issue.

The solution in #667 seems to help.
Commenting out self.$overlay.focus(); trashes keyboard navigation (I really don't care :-)), but it seems to "fix" the issue.

[ashok-2695]

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

lightbox.option({ disableScrolling: true });