I'm developing a horizontal-scrolling portfolio website using React.js. Essentially it's just a sideways picture gallery that you can easily scroll through using the trackpad.

Currently it all fits into a big container that uses:

  overflow-x: scroll;
  overflow-y: none;

  -ms-overflow-style: none;
  scrollbar-width: none;

Recently I realized that this site would be unusable for people who use a mouse and a desktop computer because as far as I know the mouse can't scroll sideways unless there's a scrollbar (which I don't want to add for aesthetic reasons) or some kind of y-to-x scroll conversion.

Now I'm trying to implement this scroll conversion in case users are unable to scroll horizontally. I found this solution but couldn't get it to work correctly:

const scroller = document.getElementById('pageContainer');

window.addEventListener('wheel', e => {
   scroller.scrollLeft += e.deltaY;
});

The snippet above effectively breaks both ways of scrolling for me. The vertical scroll scrolls my page container to the left very slightly, about 1/12th the speed of normal scrolling if not less. The previously-working horizontal scroll now seems to "fight" with the other scroll and jerk the page into the correct direction or stutter it over.

What am I missing? What's the cleanest way to achieve this?

Ideally I'd like the scrolling to move side to side in a sinusoidal motion if I'm "scrolling" in a circular motion.

EDIT:

I've found a codepen that achieves the desired behaviour and implemented it: https://codepen.io/aaaaaaaz/pen/OJpXBXM

It still didn't work but it gave me the idea to try an disable scroll-behavior: smooth; in my css – I was using it for buttons that would programmatically scroll you to further parts of the page faster.

The new question now is, is there any way for these things to work in tandem?