Fixing (and Speeding Up) the Samples Page Scroll

The sample site builds page scrolls its gallery sideways — a filmstrip of site tiles wider than the viewport. The CSS and the Lenis wiring for a plain mouse wheel to drag that scrollbar left-to-right had been sitting there for a while. It never actually worked.

The bug

lenis-init.js looks for every element marked data-lenis-horizontal and binds a horizontal scroll instance to it. The problem was when: the script tag sits near the top of <body>, which runs before the gallery markup further down the page even exists. querySelectorAll found nothing, so the horizontal instance was never created — wheeling over the tiles just did nothing, silently.

The fix

Gallery setup now waits for DOMContentLoaded instead of running at script time. On top of that, a plain vertical wheel doesn't natively map to a horizontal scrollbar at all, so there's now one listener that decides, per scroll tick, who owns it: hovering over the gallery hands it the wheel until it runs out of tiles in that direction, then control passes back to the page; hovering elsewhere scrolls the page first and only spills into an on-screen gallery once the page itself has nowhere left to go. CSS scroll-snap — which was fighting the smooth animated scroll, tugging the row back mid-glide — got scoped to touch input only, where a finger actually benefits from it.

Then: faster

Once it worked, the first pass felt sluggish. Wheel sensitivity went from 1x to 1.8x and the scroll-settle animation tightened from 1.2s to 0.8s, so each flick of the wheel covers more ground and catches up quicker.

Same fix covers the games page gallery too — it shares the same script.