How do I scroll horizontally swiping up and down, not left to right?

Question

After putting more time and research into the code, I've almost got it where I need but am having a couple issues. First, the site scrolls horizontally but only when I swipe left/right on the trackpad. I want the user to only scroll up and down and still maintain the horizontal scroll. Second, there is a large whitespace after canvas 3 and I can't figure out how to remove it. Somewhere the width/height is incorrect but not sure where!

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

And here is my added code

<style>

body {
width:7420px !important;
}

@media screen and (min-width: 700px) {
.sb {
    display: inline-block !important;
    margin-right: -4px;
    width: 1240px !important;
    height: 100vh !important;
}}

.sib-header {
z-index:10;
}

.sib-header-menu-keep-this {
z-index:5;
}

</style>

<script>
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`);
    }
}
</script>

thanks in advance!

Answer 1

Change the current event listener from window.scrollBy(evt.deltaY, 0) to window.scrollBy(0, evt.deltaY) to enable vertical scrolling. This adjustment permits users to swipe up and down for horizontal scrolling.

Change it here:

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