Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

FIX: reset scrollbar position for mobile on lightbox images (#22822) 

Using pinch-zoom on mobile devices with lightbox images can lead to scrolling of background content.

This change handles this by capturing the window.scrollY value when opening the lightbox, then when exiting we check if the scroll position has changed and reset it.
This commit is contained in:
David Battersby 2023-07-28 15:03:04 +08:00 committed by GitHub
parent 32d4810e2b
commit 383f48c688
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 14 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
app/assets/javascripts/discourse/app/components/d-lightbox.js
View File

@ -47,6 +47,7 @@ export default class DLightbox extends Component {
elementId = LIGHTBOX_ELEMENT_ID;
titleElementId = TITLE_ELEMENT_ID;
animationDuration = ANIMATION_DURATION;
scrollPosition = 0;
get layoutType() {
return window.innerWidth > window.innerHeight
@ -201,6 +202,7 @@ export default class DLightbox extends Component {
this.isLoading = true;
this.isVisible = true;
this.scrollPosition = window.scrollY;
this.#setCurrentItem(this.currentIndex);
@ -462,6 +464,8 @@ export default class DLightbox extends Component {
this.isVisible = false;
this.willClose = false;
this.resetScrollPosition();
this.callbacks.onCleanup?.();
this.callbacks = {};
@ -469,6 +473,16 @@ export default class DLightbox extends Component {
}
}
resetScrollPosition() {
if (window.scrollY !== this.scrollPosition) {
window.scrollTo({
left: 0,
top: parseInt(this.scrollPosition, 10),
behavior: "instant",
});
}
}
willDestroy() {
super.willDestroy(...arguments);
this.cleanup();