sachinchoolur / lightGallery

A customizable, modular, responsive, lightbox gallery plugin.

Home Page:https://www.lightgalleryjs.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Cannot change scroll position while lightGallery is open

wenmin92 opened this issue · comments

Description

Change the scrollbar when lightGallery is open, and when lightGallery is closed, the scroll state returns to the position before it was opened.

Steps to reproduce

  1. Open https://www.lightgalleryjs.com/demos/thumbnails/
  2. Scroll to any position and record it
  3. Click on any image to open lightGallery
  4. Keep lightGallery open
  5. Scrolling via the browser's scrollbar or scrollXXX API
  6. Close lightGallery
  7. The page scrolls back to the position before the lightGallery was opened

JS code that you use to initialize lightGallery.

lightGallery(document.getElementById('animated-thumbnails-gallery'), {
    thumbnail: true,
});

Sample HTML markup

<div id="animated-thumbnails">
    <a href="img/img1.jpg">
        <img src="img/thumb1.jpg" />
    </a>
    <a href="img/img2.jpg">
        <img src="img/thumb2.jpg" />
    </a>
    ...
</div>

Environment

  • Browser and version - Edge 98
  • OS - Windows 10 21H2
  • lightGallery version - 2.4.0

A temp solution is to use the lgAfterClose event to scroll after the lightGallery is closed:

element.addEventListener('lgAfterClose', event => {
    document.body.scrollTo(somewhere);
});

The disadvantage of this approach is that you will see scrolling flashes.

Hey @wenmin92,

Yes, the scroll position is reset to the previous value intentionally.
Could you please try using lgBeforeClose instead of lgAfterClose

Docs - https://www.lightgalleryjs.com/docs/events/#lgBeforeClose

lgBeforeClose resets the scroll position, while lgAfterClose does not.

Does that solve the issue? Let me know if you need a demo

Well, lgBeforeClose is not applicable to this scenario at all, because it still resets the scrolling state afterwards; lgAfterClose basically solves the problem, but is not perfect, because the scrolling process will be seen. Not a big problem, though.

I think using a setTimeout in lgBeforeClose would give a better result.

element.addEventListener('lgBeforeClose', event => {
    setTimeout(()=>{
        document.body.scrollTo(somewhere);
    }, 20)
});

Tested, the effect is really much better. 😄