Estoy desarrollando un sitio web de cartera de desplazamiento horizontal usando React.js. Esencialmente, es solo una galería de imágenes lateral por la que puede desplazarse fácilmente con el panel táctil.

Actualmente todo cabe en un gran contenedor que utiliza:

 overflow-x: scroll; overflow-y: none; -ms-overflow-style: none; scrollbar-width: none;

Recientemente me di cuenta de que este sitio sería inutilizable para las personas que usan un mouse y una computadora de escritorio porque, hasta donde yo sé, el mouse no puede desplazarse hacia los lados a menos que haya una barra de desplazamiento (que no quiero agregar por razones estéticas) o algún tipo de conversión de desplazamiento de y a x.

Ahora estoy tratando de implementar esta conversión de desplazamiento en caso de que los usuarios no puedan desplazarse horizontalmente. Encontré esta solución pero no pude hacer que funcionara correctamente:

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

El fragmento anterior rompe efectivamente ambas formas de desplazamiento para mí. El desplazamiento vertical desplaza el contenedor de mi página hacia la izquierda muy levemente, aproximadamente 1/12 de la velocidad del desplazamiento normal, si no menos. El desplazamiento horizontal que funcionaba anteriormente ahora parece "luchar" con el otro desplazamiento y empujar la página en la dirección correcta o tartamudear.

¿Qué me estoy perdiendo? ¿Cuál es la forma más limpia de lograr esto?

Idealmente, me gustaría que el desplazamiento se moviera de lado a lado en un movimiento sinusoidal si estoy "desplazando" en un movimiento circular.

EDITAR:

Encontré un codepen que logra el comportamiento deseado y lo implementé: https://codepen.io/aaaaaaaz/pen/OJpXBXM

Todavía no funcionó, pero me dio la idea de intentar desactivar scroll-behavior: smooth; en mi css: lo estaba usando para botones que lo desplazarían mediante programación a otras partes de la página más rápido.

La nueva pregunta ahora es, ¿hay alguna forma de que estas cosas funcionen en conjunto?