I'm making a horizontal website, and i'm looking for a way to make the up/down scrolling motion result in a horizontal scroll - so no matter which way you decide to scroll you will scroll horizontally. I flipped the entire page 90deg so i'm not sure if i need to divert a horizontal scroll to vertical scroll instead? Can anyone take a look, my page is jakobnatorp.com

The css i used is:

.site-content{
width:100vh;
  height:100vw;
  overflow-x:hidden;
  overflow-y: scroll;
  transform: rotate(-90deg) translateX(-100vh);
  transform-origin: top left; 
  position:absolute;
  scrollbar-width:none;
  -ms-overflow-style:none;
}

.elementor-section-wrap{
  transform: rotate(90deg) translateY(-100vh);
  transform-origin: top left; 
  display:flex;
  flex-direction: row; 
  width: 600vw;
}

.section{ width:100vw; height:10vh}

::-webkit-scrollbar{
display:none
}

 body, html { overflow-x:scroll;   overflow-y: hidden; }

I thought i'd use some javascript like

site-content.addEventListener('wheel', (ev) => {
  ev.preventDefault();
  scrollableElement.scrollLeft += ev.deltaY + ev.deltaX;
});

But i can't seem to get it to work. Also - i'm new at javascript. Any help is appreciated. Thanks in advance.

• Jakob