Let's try a combined blog post today: one tip for helping your users get around when you have horizontal scroll areas (for effect, or whatever), and one tip for navigating the web.

Vertical To Horizontal

If you have a great, amazing UI feature which just happens to scroll horizontally: think a big long list of products which go on forever, users can use say, a trackpad or a scroll bar to get there.

But if your user has a regular mouse with only a vertical scroll wheel, how can they navigate that area?

We can actually redirect catch the wheel event, and just modify the scrollLeft property (which controls horizontal navigation) based on deltaY (the up and down motion of the wheel). We also need deltaX, as otherwise we prevent real horizontal scrolling. Take a look:

// handle up/down scrollwheel on the scroller, as most folks don't have horizontal scrollscrollableElement.addEventListener('wheel', (ev) => {  ev.preventDefault();  // stop scrolling in another direction  scrollableElement.scrollLeft += (ev.deltaY + ev.deltaX);});

This is something we used on Santa Tracker in the Elf Builder game.

The Tip (aka Today I Learned)

If you scroll vertically on a page (in nearly any browser) but hold down shift, you'll actually scroll horizontally.

Thanks!

That's all for today!

18