Media pager with a mouse: the wheel pages, ctrl+wheel zooms, arrows for the pointer. Adam reached for the scroll wheel in the pager on his laptop and nothing useful happened: a notch scrolled the snap container a hundred pixels and the glide's snap put it straight back (a headless probe of the live pager: scrollTop stays 0), so the arrow keys were the only desktop way through. Now a wheel notch is a step — down the next post, up the one before, a sideways notch (a trackpad's, or shift+wheel) along the post's pictures — with a 220 ms breath between steps so a spin of the wheel is a step or two, not five; a trackpad's run of small deltas is one step per run (its first 40 px, the rest until a pause is spent). Ctrl+wheel zooms the picture at the cursor, which is also what a trackpad's pinch arrives as in Chrome (attachZoom's new wheel: 'ctrl' mode, 0.004 per unit); while zoomed the plain wheel pans it, and at 1× it is the pager's again. And where there is a pointer to hover with (hover: hover and pointer: fine), arrows: up and down at the right edge, left and right when the post has a picture that way (has-left/has-right, set as the slide on screen changes), faint until the pointer is over the pager. The keys, the wheel and the arrows share one step (pagerStep). No mouse drag-flick: discrete steps suit a pager. tools/pager-wheel-test.js (CDP mouseWheel is always a 120-unit notch to Chrome, so a trackpad run is dispatched page-side; headless has no hovering pointer, so one is given with --blink-settings); feed-picture-pager and image-zoom tests pass.

Co-Authored-By: Claude Fable 5.1 <[email protected]>
Claude-Session: https://claude.ai/code/session_01J1Kon8bxJoHRpJdSzshCkp

1 files changed, 20 insertions, 0 deletions

diff --git a/src/style.css b/src/style.css
index f908a05..c581535 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1546,6 +1546,26 @@ body::after {
 }
 .mp-sound { font-size: 15px; }
 .mp-sound .off { display: none; }
+/* A mouse's way through the pager: arrows, where there is a pointer to
+   hover with (a phone swipes). Faint until the pointer is over the pager;
+   the sideways pair only when the post has a picture that way. */
+.mp-arrows { display: none; }
+@media (hover: hover) and (pointer: fine) {
+  .mp-arrows { display: contents; }
+  .mp-arrow {
+    position: absolute; z-index: 3; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
+    display: flex; align-items: center; justify-content: center; cursor: pointer;
+    color: #fff; background: rgba(255, 255, 255, .14); opacity: .4; transition: opacity .15s, background .15s;
+  }
+  .mp-arrow svg { width: 26px; height: 26px; }
+  .media-pager:hover .mp-arrow { opacity: .8; }
+  .mp-arrow:hover { opacity: 1; background: rgba(255, 255, 255, .28); }
+  .mp-up { right: 14px; top: calc(50% - 50px); }
+  .mp-down { right: 14px; top: calc(50% + 6px); }
+  .mp-ar-left { left: 14px; top: calc(50% - 22px); }
+  .mp-ar-right { right: 72px; top: calc(50% - 22px); }
+  .media-pager:not(.has-left) .mp-ar-left, .media-pager:not(.has-right) .mp-ar-right { display: none; }
+}
 .media-pager.quiet .mp-sound .on { display: none; }
 .media-pager.quiet .mp-sound .off { display: inline; }
 /* muted against our will: the button stays up so the way to sound is plain */