Я не могу найти, почему n -й итерации изображения не загружаются ⇐ Javascript

[Anonymous]

Привет, я пытаюсь создать график для моего фэнтезийного мира, и это работает по большей части. Вы можете увидеть это в действии здесь. https://www.skazkaworld.com/timeline.html
Как видите, изображение фоновой руны с 8 -й записи и за его пределами не отображается правильно. Я не могу на всю жизнь понять, в чем проблема. Я все еще учусь, поэтому мой код не очень элегантен.





// Load navbar.html dynamically
fetch("navbar.html")
.then(response => response.text())
.then(data => {
document.getElementById("navbar").innerHTML = data;

// Now that navbar is loaded, attach hamburger event
const hamburger = document.querySelector(".hamburger");
const navLinks = document.querySelector(".nav-links");

if (hamburger && navLinks) {
hamburger.addEventListener("click", () => {
navLinks.classList.toggle("active");
hamburger.classList.toggle("open");
});
}
});


< /code>
css: < /p>
/* Timeline */ .timeline {
display: block;
margin: 100px auto 20px;
width: 800px;
padding: 14px;
background: rgba(20, 20, 20, 0.85);
height: 80vh;
overflow: auto;
background-image: url("assets/timeline.jpg"); /* replace with your image */
background-repeat: repeat-y; /* repeats vertically */
background-position: center top; /* centers it horizontally */
background-size:cover; /* adjust if needed, e.g., "contain" or specific width */
}

.event {
margin: 18px 0;
cursor: pointer;

} .event-header {
display: flex;
align-items: center;
}

.rune {
flex-shrink: 0;
width: 28px;
height: 28px;
margin-right: 8px;
background: url("assets/rune-marker.png") center/contain no-repeat;
filter: grayscale(100%) brightness(0.9);
transition: filter 0.3s ease, transform 0.35s ease;
}

.rune.active { filter: grayscale(0%) brightness(1.1);
transform: scale(1.12); }

.event-details {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.4s ease, opacity 0.4s ease;
padding-left: 36px;
font-size: 0.9em;
color: #ccc;
}

.event.open .event-details {
max-height: 200px;
opacity: 1;
margin-top: 4px;
}
< /code>
Наконец -то js: < /p>
// timeline.js
document.addEventListener("DOMContentLoaded", () => {
const timeline = document.getElementById("timeline");

// Timeline data array
const timelineEvents = [
{
year: "1200 AE",
title: "Founding of the First Ascent",
details: "The First Ascent arises atop the frozen peaks of Skazka, where mortals defied the giants."
},
{
year: "1345 AE",
title: "The Rift of Molach",
details: "A tear in the weave of reality as Molach's fall tore open the land and spirits slipped through."
},
{
year: "1502 AE",
title: "The Night of Whispering",
details: "When every shadow spoke and the forests sang curses in voices not their own."
},
{
year: "1502 AE",
title: "The Night of Whispering",
details: "When every shadow spoke and the forests sang curses in voices not their own."
},
{
year: "1502 AE",
title: "The Night of Whispering",
details: "When every shadow spoke and the forests sang curses in voices not their own."
},
{
year: "1502 AE",
title: "The Night of Whispering",
details: "When every shadow spoke and the forests sang curses in voices not their own."
},
{
year: "1502 AE",
title: "The Night of Whispering",
details: "When every shadow spoke and the forests sang curses in voices not their own."
},
{
year: "1502 AE",
title: "The Night of Whispering",
details: "When every shadow spoke and the forests sang curses in voices not their own."
},
{
year: "1502 AE",
title: "The Night of Whispering",
details: "When every shadow spoke and the forests sang curses in voices not their own."
},
{
year: "1502 AE",
title: "The Night of Whispering",
details: "When every shadow spoke and the forests sang curses in voices not their own."
},
// Add more events here...
];

// Generate events dynamically
timelineEvents.forEach((ev, i) => {
const eventDiv = document.createElement("div");
eventDiv.className = "event";
eventDiv.dataset.id = i;

eventDiv.innerHTML = `



${ev.year}

${ev.title}



${ev.details}

`;

timeline.appendChild(eventDiv);
});

// Scroll rune activation - FIXED to use timeline container scroll
const events = document.querySelectorAll(".event");

function onTimelineScroll() {
const timelineRect = timeline.getBoundingClientRect();
const scrollTop = timeline.scrollTop;
const viewportMiddle = timelineRect.height / 2;

events.forEach(evt => {
const eventRect = evt.getBoundingClientRect();
const timelineTop = timelineRect.top;
const eventTop = eventRect.top - timelineTop + scrollTop;
const rune = evt.querySelector(".rune");

// Activate rune if event is in upper half of timeline viewport
if (eventTop < scrollTop + viewportMiddle) {
rune.classList.add("active");
} else {
rune.classList.remove("active");
}
});
}

// Toggle event details on click
events.forEach(evt => {
evt.addEventListener("click", () => {
evt.classList.toggle("open");
});
});

// Listen to timeline scroll instead of window scroll
timeline.addEventListener("scroll", onTimelineScroll);
onTimelineScroll(); // Initial call
});


Подробнее здесь: https://stackoverflow.com/questions/797 ... ot-loading