如何使该网页水平滚动与垂直滚动？

Question

这是一个使用Showit平台的网页。我似乎无法准确指出如何水平而不是垂直滚动画布。我已经检查了该页面，但不确定如何将所有元素拼凑在一起，从而产生水平效果！我将分享我目前拥有的一段代码，但我知道这是不正确的！

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

这是当前代码

<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>

这是我的javascript

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

任何指导将不胜感激！谢谢！

Answer 1

其实不用 JS 也可以实现。只需在 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>

这是代码的简化版本。当它在大屏幕上时，它使用样式

display: inline-block;

来内联显示所有div。当屏幕小于

display: block;

并使用媒体查询时，通过将

sb

应用于

700px

类，您可以将其更改回垂直滚动。