vibe/gitea-pages
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Glossary slider: use index-based scrollIntoView instead of scrollTo (more reliable with snap)

Browse Source
This commit is contained in:
ask 2026-05-17 20:32:48 +05:00
parent 66e831f07f
commit 22137c6f90
1 changed files with 29 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
index.html
View File

@ -774,8 +774,7 @@ main {
gap: 12px;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scroll-snap-type: x proximity;
padding: 4px 4px 12px;
width: 100%;
-webkit-overflow-scrolling: touch;
@ -1741,42 +1740,42 @@ const SCHEDULE = [
glossaryEl.appendChild(div);
});
// Slider controls
// Slider controls — index-based, uses scrollIntoView (more reliable than scrollTo with snap)
const glossPrev = document.getElementById('gloss-prev');
const glossNext = document.getElementById('gloss-next');
const glossCounter = document.getElementById('gloss-counter');
const totalCards = GLOSSARY.length;
const cards = Array.from(glossaryEl.querySelectorAll('.gloss-item'));
const totalCards = cards.length;
let currentIdx = 0;
function cardStep() {
const firstCard = glossaryEl.querySelector('.gloss-item');
if (!firstCard) return 0;
const cs = window.getComputedStyle(glossaryEl);
const gap = parseFloat(cs.columnGap || cs.gap || '12');
return firstCard.getBoundingClientRect().width + gap;
function goTo(i) {
currentIdx = Math.max(0, Math.min(totalCards - 1, i));
cards[currentIdx].scrollIntoView({ behavior: 'smooth', inline: 'start', block: 'nearest' });
updateNavState();
}
function currentIndex() {
const step = cardStep();
return step ? Math.round(glossaryEl.scrollLeft / step) : 0;
function updateNavState() {
glossCounter.textContent = `${currentIdx + 1} / ${totalCards}`;
glossPrev.disabled = currentIdx === 0;
glossNext.disabled = currentIdx === totalCards - 1;
}
function scrollToIndex(i) {
const step = cardStep();
const clamped = Math.max(0, Math.min(totalCards - 1, i));
glossaryEl.scrollTo({ left: clamped * step, behavior: 'smooth' });
// Sync currentIdx when user scrolls manually (touch/trackpad)
function syncFromScroll() {
const containerLeft = glossaryEl.getBoundingClientRect().left;
let bestIdx = 0, bestDist = Infinity;
for (let i = 0; i < cards.length; i++) {
const d = Math.abs(cards[i].getBoundingClientRect().left - containerLeft);
if (d < bestDist) { bestDist = d; bestIdx = i; }
}
if (bestIdx !== currentIdx) {
currentIdx = bestIdx;
updateNavState();
}
function updateGlossNav() {
const idx = currentIndex();
glossCounter.textContent = `${idx + 1} / ${totalCards}`;
const maxScroll = glossaryEl.scrollWidth - glossaryEl.clientWidth;
glossPrev.disabled = glossaryEl.scrollLeft <= 2;
glossNext.disabled = glossaryEl.scrollLeft >= maxScroll - 2;
}
glossPrev.addEventListener('click', () => scrollToIndex(currentIndex() - 1));
glossNext.addEventListener('click', () => scrollToIndex(currentIndex() + 1));
glossaryEl.addEventListener('scroll', updateGlossNav, { passive: true });
window.addEventListener('resize', updateGlossNav);
// initial state after layout settles
requestAnimationFrame(updateGlossNav);
glossPrev.addEventListener('click', () => goTo(currentIdx - 1));
glossNext.addEventListener('click', () => goTo(currentIdx + 1));
glossaryEl.addEventListener('scroll', syncFromScroll, { passive: true });
updateNavState();
// Render projects
const projectsEl = document.getElementById('projects-grid');