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
- Open https://www.lightgalleryjs.com/demos/thumbnails/
- Scroll to any position and record it
- Click on any image to open lightGallery
- Keep lightGallery open
- Scrolling via the browser's scrollbar or
scrollXXX
API - Close lightGallery
- 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. 😄