You did a fantastic job; very to-the-point with effective visualisations. Kudos!

One very minor note: if your scroll device reports pixel-perfect deltas rather than discrete scroll-wheel ticks (e.g. logitech mx master, laptop touchpad, etc), the behaviour in the word search box is a bit weird. Arrow keys work fine though.

Thank you!

I did test it with my mac touchpad without issue. Maybe the problem is that I wanted to make discrete scroll-wheel ticks work. I just tried a fix by normalising deltaMode to pixels.

If you could just paste this in your console, I would have a better idea:

    document.querySelector('.wall').addEventListener('wheel', e =>
      console.log(e.deltaMode, e.deltaY.toFixed(2), e.defaultPrevented ? 'PAGE' : 'native'), true)