如何水平滚动，上下滑动，而不是从左向右？

Question

在投入更多时间和研究代码之后，我几乎已经得到了我需要的地方，但遇到了一些问题。首先，该网站水平滚动，但仅当我在触控板上向左/向右滑动时。我希望用户只向上和向下滚动，并仍然保持水平滚动。其次，画布 3 之后有一个很大的空白，我不知道如何删除它。某处宽度/高度不正确，但不确定哪里！

这里是实时网页的链接 > https://den-of-dreamers-45.showitpreview.com/horizontal-test

这是我添加的代码

<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

将当前事件监听器从 window.scrollBy(evt.deltaY, 0) 更改为 window.scrollBy(0, evt.deltaY) 以启用垂直滚动。此调整允许用户上下滑动以进行水平滚动。

在这里更改：

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