Replace vertical scroll by horizontal scroll vanilla javascript

Question

I want to disable and replace the vertical scroll with horizontal one in Vanilla JavaScript. I am blocked when I try to replace my scroll values. I trust there is a simple simple (really simple) solution to that !

/* We define our function 🕹 */
function replaceVerticalScrollByHorizontal() {
  let scrollX = window.scrollX; /* Horizontal ➡️ */
  let scrollY = window.scrollY; /* Vertical ⬇️ */
  console.log({scrollX, scrollY});

  if (scrollY !== 0) {
    /* If there is a changement in verticalScroll 🔄 ⬇️ */
    const tempScrollY = scrollY; /* We create a temporary var to stock our scrollY value */
    scrollX = scrollY; /* Horizontal = Vertical */
    scrollY = 0; /* We reset the vertical because we don't want any vertical scroll */
    window.scrollTo(scrollX, scrollY); /* We scroll to our value */
    scrollY = tempScrollY; /* We replace the value of our vertical var with the temporary one */
  }
  /* If no verticalScroll changement, exit of this function 🙌 ⬇️ */
  return;
}

/* Listener on window once we start scrolling, we run our function 💨 */
window.addEventListener('scroll', replaceVerticalScrollByHorizontal);

There is a little jsfiddle with my problem: https://jsfiddle.net/zynj64m7/2/

Answer 1

If you want to only effect the mouse wheel event you can try using the "wheel" event. This works in Firefox and Chrome from my testing. Not IE (edit: actually the event does fire just the method I used to scroll doesn't seem to work so you could possibly get this to work in IE as well).

Then use event.deltaY to determine if the scroll was vertical and prevent it. Also use the direction of event.deltaY to scroll some direction horizontally instead (I Multiplied by 5 because it seemed a bit slow but you can change the scroll amount to w/e).

Update of you jsfiddle

    /* We define our function 🕹 */
    function replaceVerticalScrollByHorizontal(event) {
    	if (event.deltaY != 0) {
      	// manually scroll horizonally instead
        window.scroll(window.scrollX + event.deltaY * 5, window.scrollY);
        
        // prevent vertical scroll
      	event.preventDefault();
      }
      return;
    }

    /* Listener on window once we start scrolling, we run our function 💨 */
    window.addEventListener('wheel', replaceVerticalScrollByHorizontal);

  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>