diff --git a/frontend/src/lib/components/Viewer.svelte b/frontend/src/lib/components/Viewer.svelte index 163f025..0aa63ca 100644 --- a/frontend/src/lib/components/Viewer.svelte +++ b/frontend/src/lib/components/Viewer.svelte @@ -124,6 +124,24 @@ return () => document.removeEventListener('fullscreenchange', onFs); }); + $effect(() => { + // Лента миниатюр следует за текущим фото: активная плитка всегда в поле зрения. + const i = index; + const count = photos.length; + const strip = bottomEl; + if (!strip || !count) return; + const cell = strip.querySelectorAll('[data-strip-cell]')[i]; + if (!cell) return; + const pad = 8; + const cellRect = cell.getBoundingClientRect(); + const stripRect = strip.getBoundingClientRect(); + if (cellRect.left < stripRect.left + pad) { + strip.scrollLeft -= stripRect.left + pad - cellRect.left; + } else if (cellRect.right > stripRect.right - pad) { + strip.scrollLeft += cellRect.right - (stripRect.right - pad); + } + }); + const topClass = $derived( `pointer-events-none absolute inset-x-0 top-0 z-30 flex items-center justify-between gap-1 bg-transparent px-2 py-0.5 transition-transform duration-200 ${isFullscreen && !showTop ? '-translate-y-full' : 'translate-y-0'}` ); @@ -554,6 +572,7 @@ {#each photos as photo, i (photo.id)}