Changeset aaa700e in Klonkt

Timestamp:

08/24/2026 08:29:13 AM (2 weeks ago)

Author:

Robin <roboburr@…>

Branches:

main

Children:

a1882e5

Parents:

7b03c35

Message:

Lezen op mobiel: proef met het native snappen, achter een vlag

De vraag die deze proef beantwoordt is er precies een: houdt de browser zich
aan scroll-snap-stop: always? Die eigenschap zegt dat een uitloop nooit over
een snappunt heen mag vliegen, en dat is woord voor woord de regel van 24-8
(voorbijgescrolld of niet, je landt op het target) maar dan uitgevoerd door
het toestel met zijn eigen momentumcurve.

Dat overvliegen was destijds de reden om Lenis op mobiel erbij te halen, en
de eigenschap is toen nooit geprobeerd: hij stond op normal, en dan ook nog
op .read-post, een element dat door scroll-snap-align:none helemaal geen
snappunt is. Het ankertje dat het snappunt WEL is had hem niet.

Achter ?nativesnap=1 (en =0 om terug te gaan), onthouden in sessionStorage
omdat een htmx-navigatie de queryreeks weggooit. Staat de vlag aan, dan
blijft Lenis van de telefoon af en snapt de browser zelf. Standaard verandert
er dus niets, voor niemand, en de Lenis-kant blijft heel tot de proef gewonnen
is.

Een detail dat anders stil zou blijven staan: zetSnappen() zette het snappen
"aan" door de inline stijl leeg te maken, oftewel terugvallen op de
stylesheet. Die zet het op mobiel juist uit. Zonder Lenis zou het snappen
daarmee nooit aangaan; nu staat er expliciet 'y proximity'. Op desktop is dat
exact wat de stylesheet daar al geeft.

MOD_V 60 en style.css v=109, want beide bestanden wijzigen.

Location:

src

Files:

• assets/css/style.css (modified) (1 diff)
• assets/js/mod/read.js (modified) (3 diffs)
• views/shell.ejs (modified) (2 diffs)

src/assets/css/style.css

@@ -2548 +2548 @@
        2rem naar 4rem, dus deze ook. */
     scroll-margin-top: 4rem;
+    /* NOOIT OVER EEN GRENS HEEN VLIEGEN. Dit is de regel van 24-8 -- "ook al
+       zou het target voorbijgescrolld worden, alsnog op het target landen" --
+       maar dan als eigenschap in plaats van als JavaScript: de browser mag een
+       uitloop niet over dit snappunt heen laten gaan, hoe hard je ook veegt.
+       Een veeg komt daarmee altijd precies EEN bericht verder, nooit twee.
+       Dat overvliegen was de reden om Lenis op mobiel erbij te halen, en deze
+       eigenschap is toen nooit geprobeerd: hij stond op `normal`, en dan ook
+       nog op .read-post hierboven -- een element dat door scroll-snap-align:
+       none helemaal geen snappunt is, dus daar deed hij sowieso niets.
+       Zonder native snappen (de gewone stand op mobiel, en op desktop waar
+       Lenis het overneemt) verandert deze regel niets: er valt dan niets te
+       stoppen. Hij telt alleen mee tijdens de proef, zie nativeSnap() in
+       mod/read.js. */
+    scroll-snap-stop: always;
 }
 /* HET LAATSTE BERICHT SNAPT OOK (Robin, 20-8). Dat kon eerst niet: zijn

src/assets/js/mod/read.js

@@ -252 +252 @@
 const RUST_MS = 120;
 
+/**
+ * DE PROEF: op mobiel het NATIVE snappen terug (24-8).
+ *
+ * De vraag die deze vlag beantwoordt is er precies een: houdt de browser zich
+ * aan `scroll-snap-stop: always`? Die eigenschap zegt dat een uitloop nooit
+ * over een snappunt heen mag vliegen -- en dat is woord voor woord Robins regel
+ * ("ook al zou het target voorbijgescrolld worden, alsnog op het target
+ * landen"), maar dan uitgevoerd door het toestel met zijn eigen momentumcurve
+ * in plaats van door onze nabootsing ervan in JavaScript.
+ *
+ * Dat overvliegen was destijds de reden om Lenis er op mobiel bij te halen. De
+ * eigenschap is toen nooit geprobeerd: hij stond op `normal`, en dan ook nog op
+ * .read-post -- een element dat door scroll-snap-align:none helemaal geen
+ * snappunt is. Het ankertje dat het snappunt WEL is had hem niet.
+ *
+ * ACHTER EEN VLAG, want de Lenis-kant blijft staan tot deze proef gewonnen is.
+ * Wint hij, dan kan Lenis van de telefoon af en verdwijnen daarmee ook de vier
+ * routes waarlangs de native scroll het gebaar nu soms overneemt. Verliest hij,
+ * dan hebben we dat geweten voordat er iets weg was.
+ *
+ * ?nativesnap=1 zet hem aan, ?nativesnap=0 weer uit. De keuze blijft staan
+ * zolang het tabblad open is, want een htmx-navigatie gooit de queryreeks weg
+ * en dan zou de proef na een klik voorbij zijn.
+ */
+function nativeSnap() {
+  try {
+    const q = new URLSearchParams(location.search).get('nativesnap');
+    if (q === '1') sessionStorage.setItem('klonkt:native-snap', '1');
+    if (q === '0') sessionStorage.removeItem('klonkt:native-snap');
+    return sessionStorage.getItem('klonkt:native-snap') === '1';
+  } catch (e) {
+    return false;   // privémodus zonder opslag: gewoon de gewone weg
+  }
+}
+
 let bezig = false;          // loopt er een gebaar of een uitloop?
 let ooitGescrold = false;   // snappen begint UIT, zie zetSnappen()
@@ -305 +340 @@
   // zijn snap heeft zijn scroll-gebeurtenissen nodig om te kunnen timen.
   if (lenis || !(OP_DESKTOP.matches || OP_TOUCH.matches)) return;
+  // Staat de proef aan, dan blijft Lenis van de telefoon af en doet de browser
+  // het snappen zelf. Desktop merkt hier niets van: daar is OP_TOUCH onwaar.
+  if (OP_TOUCH.matches && nativeSnap()) return;
   const [L, S] = await Promise.all([
     import(`/assets/vendor/lenis.mjs?v=${VENDOR_V}`),
@@ -543 +581 @@
   // eerste gebaar naar beneden zet hem aan.
   const el = document.documentElement;
-  const wil = aan ? '' : 'none';
+  // EXPLICIET 'y proximity', geen lege waarde. Leeg betekent "val terug op de
+  // stylesheet", en die zet het snappen op mobiel juist UIT (de mediaquery bij
+  // .read-post, want twee snapsystemen op dezelfde scroller vechten). Zolang
+  // Lenis daar draaide klopte dat; zonder Lenis zou het snappen dan nooit meer
+  // aangaan en zou de proef niets kunnen bewijzen.
+  // Op desktop verandert er niets: dit is exact wat de stylesheet daar geeft.
+  const wil = aan ? 'y proximity' : 'none';
   if (el.style.scrollSnapType !== wil) el.style.scrollSnapType = wil;
 }

src/views/shell.ejs

@@ -222 +222 @@
 
 <!-- v9 stylesheet (full palette system) -->
-<link rel="stylesheet" href="/assets/css/style.css?v=108">
+<link rel="stylesheet" href="/assets/css/style.css?v=109">
 <script>
 /* iOS safe-area, built by hand. env(safe-area-inset-top) resolves to 0 on this iOS in
@@ -505 +505 @@
   // Eén nummer voor de hele map. Te vaak bumpen kost één download; te weinig
   // bumpen kost een bugfix die nooit aankomt.
-  var MOD_V = 59;
+  var MOD_V = 60;
 
   // name -> 1 (aan het laden) of de module-namespace (geladen). Een module