← Alle Beispiele

JavaScript Produktivität substack.com

Substack: Beitrag automatisch als gelesen markieren

Nach 80 % gescrollt wird der Beitrag in localStorage als gelesen gespeichert und ein „Read"-Abzeichen erscheint.

Code zum Kopieren

// Mark a post as "read" in localStorage after 80% of it has been scrolled through
(function () {
  var KEY = 'jz-substack-read';
  function load() { try { return JSON.parse(localStorage.getItem(KEY) || '{}'); } catch (e) { return {}; } }
  function save(map) { try { localStorage.setItem(KEY, JSON.stringify(map)); } catch (e) {} }
  function root() {
    return document.querySelector('.body.markup, .available-content, [class*="postBody"]');
  }
  function badge() {
    if (document.getElementById('jz-sub-read-badge')) { return; }
    var d = document.createElement('div');
    d.id = 'jz-sub-read-badge';
    d.textContent = '✓ Read';
    d.style.cssText = 'position:fixed;right:14px;bottom:14px;background:#16a34a;color:#fff;padding:6px 10px;border-radius:14px;font:600 12px/1 system-ui,sans-serif;z-index:99999;box-shadow:0 2px 6px rgba(0,0,0,.2);';
    document.body.appendChild(d);
  }
  function check() {
    var r = root(); if (!r) { return; }
    var rect = r.getBoundingClientRect();
    var seen = window.innerHeight - rect.top;
    var pct = seen / rect.height;
    if (pct < 0.8) { return; }
    var key = location.pathname;
    var map = load();
    if (!map[key]) { map[key] = Date.now(); save(map); }
    badge();
  }
  check();
  var map = load();
  if (map[location.pathname]) { badge(); }
  window.addEventListener('scroll', function () {
    clearTimeout(window.__jzSubRead);
    window.__jzSubRead = setTimeout(check, 200);
  }, { passive: true });
})();

So verwendest du dieses Beispiel

  1. Kopiere den Code mit der Schaltfläche oben.
  2. Installiere JustZix (2 Minuten) und öffne die Erweiterung auf der Zielseite.
  3. Füge eine neue Regel hinzu, die zu dieser Seite passt.
  4. Füge den Code in das JavaScript-Panel der Regel ein und speichere — er läuft bei jedem Seitenbesuch.

Bewerte dieses Beispiel

Noch keine Bewertungen — sei der Erste.

Funktioniert dieses Beispiel?

Snippets sind nutzlos, wenn du sie nirgendwo einfügen kannst.

JustZix ist in 2 Minuten installiert und führt deinen Code auf jeder passenden Seite aus. Kein Konto, keine Zahlung.

Kostenlos herunterladen Anwendungsfälle ansehen