How do I make this webpage scroll horizontally vs vertically?

Question

This is a webpage using the Showit platform. I can't seem to pinpoint exactly how to scroll through the canvases horizontally instead of vertically. I've inspected the page but am unsure how to piece all of the elements together that will give me the horizontal effect! I'll share a piece of code I have currently, but I'm aware this is incorrect!

Here's a link to the webpage > https://den-of-dreamers-45.showitpreview.com/horizontal-test

And here is the current code

<style>   
 body {
      overflow-x: auto; 
      overflow-y: hidden; 
      white-space: nowrap; 
      margin: 0;
    }

.d .sib-canvas-1 .sib-canvas-2 .sib-canvas-3 .ss-bg{
      display: inline-block;
      width: 100vw; 
      height: 100vh; 
      white-space: normal;
    }

</style>

This is the javascript I have

const mediaQuery = window.matchMedia('(min-width: 700px)')

if (mediaQuery.matches) {
    totalWidth = 0;
    for(i = 0; i < document.getElementsByClassName('sb').length; i++){
        totalWidth += document
            .getElementsByClassName('sb')[i]
            .offsetWidth;
    }
    document
        .getElementsByClassName('sp')[0]
        .setAttribute('style', `width:${
            totalWidth - 2500
        }px !important`);

    const scrollContainer = document.querySelector(".sp");
    scrollContainer.addEventListener("wheel", (evt) => {
        evt.preventDefault();
        window.scrollBy(evt.deltaY,0);
    });

    document.documentElement.style.overflowX = 'hidden';
} else {
    document
        .getElementsByClassName('sp')[0]
        .setAttribute('style', `width: 100% !important`);
}

function initPage() {
    const mediaQuery = window.matchMedia('(min-width: 700px)');
    if (mediaQuery.matches) {
        totalWidth = 0;
        for(
            i = 0;
            i < document.getElementsByClassName('sb').length;
            i++
        ) {
            totalWidth +=  document
                .getElementsByClassName('sb')[i]
                .offsetWidth;
        }

        document
            .getElementsByClassName('sp')[0]
            .setAttribute('style', `width:${
                totalWidth - 2500
            }px !important`);

        const scrollContainer = document.querySelector(".sp");
        scrollContainer.addEventListener("wheel", (evt) => {
            evt.preventDefault();
            window.scrollBy(evt.deltaY,0);
        });

        document.documentElement.style.overflowX = 'hidden';
    } else {
        document
            .getElementsByClassName('sp')[0]
            .setAttribute('style', `width: 100% !important`);
    }
}

Any guidance would be so appreciated! Thanks!

Answer 1

You can achieve that without JS actually. Just use media query in CSS.

* {
  margin: 0;
  padding: 0;
}

.sp {
  width: max-content;
}

.sb {
  display: inline-block;
  width: 100vw;
  height: 100vh;
  flex: 1;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

@media(max-width: 700px) {
  .sb {
    display: block;
  }
}

<div class="sp">
  <div class="sb red"></div>
  <div class="sb green"></div>
  <div class="sb blue"></div>
</div>

This is a simplify version of your code. When it is on big screen, it uses the style display: inline-block; to display all div inline. By applying display: block; to sb class when the screen is smaller than 700px with media query, you can change it back to vertical scrolling.