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

[Helen]

Danke für die Antwort,
nach dem Gelesenen lasse ich lieber meine Finger von dem Javascript und betrachte es als black-Box.
Vielleicht hat jemand ein Beispiel (vielleicht sogar ohne Javascript) wie man ggf. horzontal und vertikal scrollen kann, mit feststehend Fuß- und Kopfzeilen.

Gruß

Helen

[Tabellenkalk]

Hallo,

Vielleicht hat jemand ein Beispiel (vielleicht sogar ohne Javascript) wie man ggf. horzontal und vertikal scrollen kann, mit feststehend Fuß- und Kopfzeilen.

äh. Ja. Hat Jonathan mitgeliefert.

Gruß
Kalk

[Sven]

Was mitgeliefert, ein Beispiel?

Hier ein mit folgendem KI-Text geliefertes Beispiel, das man jetzt einfach anpassen könnte.

KI-Text:

Erstelle ein HTML/CSS mit folgenden Eigenschaften

• responsive
• 2 Kopfzeilen und eine Fußzeile fest beim Scrollen nach rechts/links oder unten/oben
• in der zweiten Kopfzeile bei breiten viewport "Link1 link2 link2" jeweils mit einem Link.
• Falls schmaler viewort, in zweiter Zeile das Hamburger Menu
• Inhalt so breit und lang, dass Scrollen erforderlich ist

[Gunnar Bittersmann]

@@Sven

Hier ein mit folgendem KI-Text geliefertes Beispiel, das man jetzt einfach anpassen könnte.

Unbrauchbarer Scheiß.

<div class="hamburger" id="hamburger">
  <span></span>
  <span></span>
  <span></span>
</div>

Man (im Sinne von: alle) kann das Menü nicht benutzen.

Nicht machen, Kinder.

🖖 Live long and prosper

[Auge]

Hallo

Was mitgeliefert, ein Beispiel?

Ja, hat er. Dass er für einige Details in die SelfHTML-Doku verlinkt, gehört hier dazu.

Hier ein mit folgendem KI-Text geliefertes Beispiel, das man jetzt einfach anpassen könnte.

Vorgabe war, dass das Konstrukt ohne JavaScript auskommt. Deines tut das wegen des doppelten Navigationsmenüs (für Desktop- und Mobilansicht), dass das Mobilmenü per JavaScript öffnet, nicht. Echt jetzt? Dass der damit im Zusammenhang stehende Code ineffizient ist, nimmt sich dabei fast schon als unerheblich aus. Und dazu, nichtinteraktive Elemente mit interaktivem Verhalten nachzurüsten, statt interaktive Elemente zu benutzen, hatte sich Gunnar schon geäußert.

Das hat die KI schön zusammengestümpert.

Wenn es darum ging, Helen ein benutzbares Beispiel zu zeigen, ist die KI krachend gescheitert. An dem Code-Beispiel wäre soviel zu reparieren, dass Helen es mit MH^[1] auch gleich ganz selbst erarbeiten kann.

Tschö, Auge

---

1. Menschliche Hilfe ↩︎

[Sven]

1. Minimales JS

2. An dem Code-Beispiel wäre soviel zu reparieren, dass Helen es mit MH[^1] auch gleich ganz selbst erarbeiten kann.

Das verlinkte Zeug muss ggf. auch erst von Helen erabeitet werden. Oder wisst Ihr, ob sie ins heiße oder kalte Wasser geworfen wurde!

[Gunnar Bittersmann]

@@Sven

Das verlinkte Zeug muss ggf. auch erst von Helen erabeitet werden. Oder wisst Ihr, ob sie ins heiße oder kalte Wasser geworfen wurde!

Wenn man Anfängern ein Beispiel liefert, dann sollte das ein gutes Beispiel sein. Nicht eins, wo man erst alle Fehler suchen muss; wobei man als Anfänger gar nicht überblicken kann, was daran alles falsch ist.

🖖 Live long and prosper

[Auge]

Hallo

2. An dem Code-Beispiel wäre soviel zu reparieren, dass Helen es mit MH auch gleich ganz selbst erarbeiten kann.

Das verlinkte Zeug muss ggf. auch erst von Helen erabeitet werden.

Ohne Zweifel ist das so. Ihr blieben aber die von der KI eingefügten Fehler, die sie vermutlich nicht als solche erkennen würde, erspart.

Oder wisst Ihr, ob sie ins heiße oder kalte Wasser geworfen wurde!

Was ist jetzt was? Mir wäre beides unangenehm, und bezüglich fehlender Erfahrung mit einer Materie, wäre es wohl egal, in welch mistemperiertes Wasser ich eintauchen soll.

Helens Frage an sich lässt vermuten, dass sie mit JS-Code noch nicht allzuviel Erfahrung hat. Deshalb fragt sie hier nach und deshalb würden wir ihr auch dabei helfen, passenden Code, der den für sie unverständlichen Code ersetzen soll, zu erstellen. Helfen heißt aber nicht vorkauen. Deshalb die Links in die Doku, zu der sie ja auch Fragen stellen kann, wenn sie sich ergeben. Schließlich soll sie dabei verstehen, was das soll, damit sie nicht in einem halben Jahr wieder mit Fragezeichen über dem rauchenden Kopf da sitzt.

Dass die Antwort einer KI nicht uninterpretiert übernommen werden darf, haben wir ja nun erarbeitet. Und um interpretieren zu können, muss man selbst wissen.

Tschö, Auge

[Gunnar Bittersmann]

@@Helen

Vielleicht hat jemand ein Beispiel (vielleicht sogar ohne Javascript) wie man ggf. horzontal und vertikal scrollen kann, mit feststehend Fuß- und Kopfzeilen.

Sowas in der Art^[1]: Beispiel?

🖖 Live long and prosper

---

1. No pun intended. 😎 ↩︎

[MudGuard]

Hi,

Vielleicht hat jemand ein Beispiel (vielleicht sogar ohne Javascript) wie man ggf. horzontal und vertikal scrollen kann, mit feststehend Fuß- und Kopfzeilen.

Sowas in der Art: Beispiel?

Hm. Vertikal Scrollen funktioniert. Horizontal nicht - die Reihe der Bildchen wird einfach abgeschnitten.

Firefox 150.0.1, Desktop,

cu,
Andreas a/k/a MudGuard

[Gunnar Bittersmann]

@@MudGuard

Sowas in der Art: Beispiel?

Hm. Vertikal Scrollen funktioniert. Horizontal nicht - die Reihe der Bildchen wird einfach abgeschnitten.

Das ja. Bei mir (macOS) geht das mit dem horizontalen Scrollen. Sowohl mit Trackpad (Maus hab ich keine) als auch per Tastatur.

Firefox 150.0.1, Desktop,

Dito. Gleich mal auf 150.0.2 updaten.

🖖 Live long and prosper

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Bei mir (macOS) geht das mit dem horizontalen Scrollen.

Scrollbar ist nur der Bereich mit den Albumcovern, nicht die ganze Seite.

Gleich mal auf 150.0.2 updaten.

Done.

🖖 Live long and prosper

[MudGuard]

Hi,

ich ziehe das zurück.

Die Kombination aus Win-Updte auf 11 und Firefox-Update hat dafür gesorgt, daß die Scrollbars extrem schmal wurden, und auch nur dann angezeigt wurden, wenn die Maus über dem betroffenen Element waren.

(ließ sich beides beheben - allerdings überlagert der Scrollbar jetzt Teile des Inhalts ...)

cu,
Andreas a/k/a MudGuard

[Sven]

Wenn also Helen Euer Beispiel genommen hätte, wäre dies ebenfalls wie das KI-Exemplar nicht korrekt.

In beiden Fällen würde sie vermutlich hier um Hilfe bitten.

[Gunnar Bittersmann]

@@Sven

Wenn also Helen Euer Beispiel genommen hätte, wäre dies ebenfalls wie das KI-Exemplar nicht korrekt.

Unsinn.

In beiden Fällen würde sie vermutlich hier um Hilfe bitten.

Das kann sie gern weiterhin tun.

🖖 Live long and prosper

[Gunnar Bittersmann]

@@MudGuard

allerdings überlagert der Scrollbar jetzt Teile des Inhalts ...)

Das sollte jetzt besser sein. Hab bei ol margin-block genullt und stattdessen padding-block gesetzt, damit auch der Schatten um die Bilder oben und unten zu sehen ist.

Der Schatten dient dazu, dass auch die Cover mit weißem Hintergrund (Born to Run, Tunnel of Love; im dark mode die Cover mit dunklem Hintergrund) visuell Quadrate sind und nicht einfach so in den Seitenhintergrund verschwinden.

🖖 Live long and prosper

[Gunnar Bittersmann]

@@MudGuard

die Reihe der Bildchen wird einfach abgeschnitten.

Das ist auch gut so. Das nur teilweise sichtbare Bild suggeriert: hier kann man doch bestimmt horizontal scrollen.

Blöd, wenn Viewportbreite und Bildbreiten gerade so sind, dass eine ganzzahlige Anzahl von Bildern genau passt und nichts vom nächsten Bild zu sehen ist. Dann hat man bei nur während des Scrollens angezeigten Scrollbars keinen Hinweis, dass da noch mehr ist und man horizontal scrollen kann.

Hold my beer!

Man ändert also die angestrebte Bildgröße geringfügig so, dass das nächste Bild immer angeschnitten ist:

1. Ermittle, wie viele Bilder nebeneinander passen. Zur Verfügung stehende Breite^[1] geteilt durch angestrebte Bildbreite plus Zwischenraum, auf ganze Zahl gerundet:

   --visible-items: round(100cqw / (var(--suggested-size) + var(--gap)));
   

   Da man noch nicht in allen Browsern (hallo, Firefox) durch eine Länge teilen kann, steckt das in einem @supports-Block, wo geprüft wird, ob da eine Ganzzahl rauskommt, die ein gültiger Wert für die columns-Eigenschaft ist:

   @supports (columns: round(1em/1em)) {
   

2. Berechne die Bildgröße: zur Verfügung stehende Breite geteilt durch Anzahl der Bilder minus Zwischenraum:

   --calculated-size: calc(100cqw / var(--visible-items) - var(--gap));
   

   Das passiert immer noch im @supports-Block.

3. Setze die Bildgröße auf den berechneten Wert. In Brosern, in denen man noch nicht durch eine Länge teilen kann, gibt es keinen berechneten Wert; nimm dann den angestrebten Wert:

   width: auto;
   height: var(--calculated-size, var(--suggested-size));
   

Sieht dann so aus: ☞ image size calculation

🖖 Live long and prosper

---

1. Ich hab das mit Container-Query-Einheit cqw gemacht. In diesem speziellen Fall (wenn der Container über die gesamte Viewportbreite geht) ginge das auch mit Viewport-Einheit vw. ↩︎

[Gunnar Bittersmann]

@@Gunnar Bittersmann

die Reihe der Bildchen wird einfach abgeschnitten.

Das ist auch gut so. Das nur teilweise sichtbare Bild suggeriert: hier kann man doch bestimmt horizontal scrollen.

Blöd, wenn Viewportbreite und Bildbreiten gerade so sind, dass eine ganzzahlige Anzahl von Bildern genau passt und nichts vom nächsten Bild zu sehen ist. Dann hat man bei nur während des Scrollens angezeigten Scrollbars keinen Hinweis, dass da noch mehr ist und man horizontal scrollen kann.

Was man auch tun kann: Buttons zum Scrollen anbieten; in Chromium-Browsern allein mit CSS (experimentell): Erstellen von CSS-Karussells [MDN]

Sieht dann so aus: ☞ Codepen 3

Das lässt sich auch mit

Man ändert also die angestrebte Bildgröße geringfügig so, dass das nächste Bild immer angeschnitten ist

kombinieren: ☞ Codepen 4

🖖 Live long and prosper