En aquest article t'explique un xicotet hack que he necessitat implementar en la meua web després d'instal·lar el mòdul GLightbox per a les meues imatges.
El problema és que, per defecte, quan configurem GLightbox a una vista o class="glightbox-inline" en un enllaç d'un article, s'ens obre la imatge o vídeo però la pàgina fa scroll fins al començament superior, perdent així la possició on estàvem, i dóna un poc de confusió.
Doncs bé, amb aquest xicotet hack tindrem l'experiència de navegació que ja tenia amb l'anterior mòdul Colorbox on podem fer zoom a les imatges i, al tancar-les, estem en el mateix lloc de la pàgina.
Doncs bé, per fer-ho, afegirem a l'estil CSS del nostre theme:
html.glightbox-open {
overflow: hidden; /* bloqueja scroll global */
}
body.glightbox-open {
overflow: visible !important;
}
I a la plantilla ...templates/layout/html.html.twig afegirem el següent Javascript:
<script>
(function () {
let savedY = 0;
let savedHash = '';
let restoreUntil = 0;
//
function restoreScrollIfNeeded() {
if (Date.now() > restoreUntil) return;
window.scrollTo(0, savedY);
}
//
document.addEventListener('click', function (e) {
const a = e.target.closest('a.glightbox, a[data-glightbox], a.glightbox-link');
if (!a) return;
//
savedY = window.scrollY || window.pageYOffset || 0;
savedHash = window.location.hash || '';
//
const href = (a.getAttribute('href') || '').trim();
if (href === '#' || href.startsWith('#')) {
e.preventDefault(); // evita el jump al top per ancoratge
}
//
// Nom\xc3\xa9s \xe2\x80\x9cprotegeix\xe2\x80\x9d el scroll durant una finestra curteta despr\xc3\xa9s del click
restoreUntil = Date.now() + 400;
//
// Restaura immediatament (i una miqueta despr\xc3\xa9s) per cobrir repaints
requestAnimationFrame(restoreScrollIfNeeded);
setTimeout(restoreScrollIfNeeded, 0);
setTimeout(restoreScrollIfNeeded, 50);
setTimeout(restoreScrollIfNeeded, 150);
}, true);
//
// Si hi ha hashchange (algunes configs ho provoquen), neutralitza\xe2\x80\x99l nom\xc3\xa9s en eixa finestra
window.addEventListener('hashchange', function () {
if (Date.now() > restoreUntil) return;
//
// torna al hash anterior sense disparar un nou salt
const base = window.location.pathname + window.location.search + (savedHash || '');
history.replaceState(null, '', base);
//
// i torna a la posici\xc3\xb3
requestAnimationFrame(restoreScrollIfNeeded);
setTimeout(restoreScrollIfNeeded, 0);
});
})();
</script>
Amb això ja ho tenim. Ara si estem en una possició concreta de la web, podem fer click en qualsevol imatge o vídeo:
I si fem click damunt d'un enllaç, veurem que (en el fons) no s'ha fet cap scroll i la pàgina continua en la mateixa possició, de manera que no mareja als usuaris:
