Frage zu javascript

[Helen]

Hallo!

Ich soll ein (korrektes) Programm von einem ausgeschiedenen Mitarbeiter übernehmen. Dabei bin ich auf das folgende script gestoßen, was für mich völlig unverständlich ist. Kann mir jemand ganz grob erklären, wofür dieses gut ist?

<script>
  const header = document.getElementById("header");
  const footer = document.getElementById("footer");
  const scrollbar = document.getElementById("scrollbar");
  const scrollbarInner = document.getElementById("scrollbar-inner");
  const contentWrapper = document.getElementById("content-wrapper");
  const content = document.getElementById("content");

  function updateLayout() {
    const headerHeight = header.offsetHeight;
    const footerHeight = footer.offsetHeight;

    // Scrollbar direkt über dem Footer
    scrollbar.style.bottom = footerHeight + "px";

    // Contentfenster zwischen Header und Scrollbar
    contentWrapper.style.top = headerHeight + "px";
    contentWrapper.style.bottom = (footerHeight + 20) + "px";

	    contentWrapper.addEventListener("touchmove", (e) => {
    scrollbar.scrollLeft -= e.touches[0].movementX || 0;
      });	

	let lastTouchX = 0;

contentWrapper.addEventListener("touchstart", (e) => {
  lastTouchX = e.touches[0].clientX;
});

contentWrapper.addEventListener("touchmove", (e) => {
  const currentX = e.touches[0].clientX;
  const deltaX = lastTouchX - currentX;

  scrollbar.scrollLeft += deltaX;   // Scrollbar bewegen
  lastTouchX = currentX;            // Position aktualisieren
});


    // Breite der Scrollbar an Content anpassen
    scrollbarInner.style.width = content.scrollWidth + "px";
  }

  // horizontale Synchronisation
  scrollbar.addEventListener("scroll", () => {
    contentWrapper.scrollLeft = scrollbar.scrollLeft;
  });

  contentWrapper.addEventListener("scroll", () => {
    scrollbar.scrollLeft = contentWrapper.scrollLeft;
  });

  updateLayout();
  window.addEventListener("resize", updateLayout);
</script>

[Jonathan Harker]

Hallo Helen,

Hallo!

Ich soll ein (korrektes) Programm von einem ausgeschiedenen Mitarbeiter übernehmen. Dabei bin ich auf das folgende script gestoßen, was für mich völlig unverständlich ist. Kann mir jemand ganz grob erklären, wofür dieses gut ist?

Das Skript baut im Grunde ein eigenes horizontales Scroll-System.

Es macht mehrere Dinge gleichzeitig:

• Es misst die Höhe von Header und Footer.
• Es positioniert den Contentbereich dynamisch dazwischen.
• Es erstellt eine eigene horizontale Scrollbar über dem Footer.
• Es synchronisiert:
  • den eigentlichen Content
  • und die externe Scrollbar.
• Es ergänzt Touch-Unterstützung für horizontales Scrollen auf Mobilgeräten.
• Es passt die Breite der künstlichen Scrollbar an die echte Contentbreite an.

Kurz gesagt:

Der Benutzer scrollt horizontal durch breite Inhalte, während Header und Footer fest bleiben.

Moderne Alternative

Heute würde man meist:

• nur EINEN Scrollcontainer verwenden,
• native Scrollbars nutzen,
• und die Scrollbar per CSS stylen.

Zum Beispiel:

main {
  overflow-x: auto;
  scrollbar-width: thin;
}
main::-webkit-scrollbar {
  height: 14px;
}

im Wiki:

• Scrollbalken_gestalten
• OnePager

Bis bald!
Jonathan