Wie ich den Scroll-Prozentsatz in die Browser-Titelzeile einfüge

Ein paar nette Tricksereien von Knut Melvær.

Letztendlich läuft der Trick darauf hinaus, herauszufinden, wie weit man auf der Seite gescrollt hat und den Titel entsprechend zu ändern, wie z.B.

document.title = `${percent}% ${post.title}`

Knuts Trick setzt React und die Installation einer zusätzlichen Bibliothek voraus. Ich bin sicher, dass diese Bibliothek allerhand clevere Dinge tut, aber wenn Sie dies im "Vanilla"-Stil machen möchten, würde ich wahrscheinlich etwas wie das hier verwenden...

const percentLabel = document.querySelector("#percent");
const originalTitle = document.title;

window.addEventListener("scroll", () => {
  let scrollTop = window.scrollY;
  let docHeight = document.body.offsetHeight;
  let winHeight = window.innerHeight;
  let scrollPercent = scrollTop / (docHeight - winHeight);
  let scrollPercentRounded = Math.round(scrollPercent * 100);
  percentLabel.innerHTML = scrollPercentRounded;
  document.title = `(${scrollPercentRounded}%) ${originalTitle}`;
});

Hier ist ein Projekt und hier ist die bereitgestellte Website, damit Sie es in Aktion sehen können.

Direkter Link →