Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Incompatible with hugo-easy-gallery #432

Open
Darthagnon opened this issue Mar 28, 2022 · 2 comments
Open

Incompatible with hugo-easy-gallery #432

Darthagnon opened this issue Mar 28, 2022 · 2 comments

Comments

@Darthagnon
Copy link

Describe the bug
When used concurrently with Hugo Easy Gallery in a Hugo site, scroll position on the page will be reset after viewing an image.

Expected behavior
Open an image in Hugo Easy Gallery, then close it, and your scroll position should be remembered.

Examples
Example site with the bug (use hugo serve -D)
If you want the latest Hugo Easy Gallery code, here is my fork, which has updates and PRs merged.

Environment

  • Used Operating System(s): Win10 v1709
  • Used Browser(s) (with version): Ungoogled Chromium v90
@Darthagnon
Copy link
Author

I was also wondering how I could go about removing OverlayScrollbars from my site, as a temporary workaround for this incompatibility. However, removing it via a conditional statement in my site's config.toml (and requisite edits in the site's theme code) to disable OverlayScrollbars JS/CSS breaks the site's sticky header function.

I tried figuring out how to stub the JS so that minimal function remains to support the sticky header, but with regular scrollbars, but haven't had any luck.

@aniketkumar7
Copy link

Here's a rough example of how this could be done:

// To Remember scroll position before opening image
var scrollPosition = window.scrollY;

// Open image in Hugo Easy Gallery
// ...

// To Restore scroll position after closing image
window.scrollTo(0, scrollPosition);

JS code to use the regular scrollbars:

// Get the header element
var header = document.querySelector('header');

// Get the height of the header
var headerHeight = header.offsetHeight;

// Add a class to the header when the user scrolls down
window.addEventListener('scroll', function() {
if (window.scrollY > headerHeight) {
header.classList.add('sticky');
} else {
header.classList.remove('sticky');
}
});

is it works ?
If it is, can I contribute to it?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants