求助：如何实现上下滑动触发水平滚动及消除Canvas3后空白

问题清单 #

• 需将网站的触控板左右滑水平滚动改为上下滑动触发水平滚动
• Canvas 3后方存在大量空白区域，无法定位宽高设置错误点

用户现有代码 #

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

解决方案 #

1. 上下滑动触发水平滚动修复 #

现有代码存在事件监听容器错误、滚动逻辑指向全局窗口而非目标容器、代码冗余的问题，修改后：

• 监听window滚轮事件，直接操作滚动容器的scrollLeft属性实现水平滚动
• 合并重复初始化逻辑，添加窗口resize监听适配屏幕变化
• 移除硬编码滚动偏移，确保滚动逻辑准确

2. Canvas 3后方空白区域修复 #

• 移除body固定宽度，改为子元素动态撑开，避免硬编码导致宽度溢出
• 修正.sb元素对齐方式，消除inline-block默认间距产生的额外宽度
• 移除.sp宽度计算中的硬编码偏移，确保总宽度等于所有.sb元素宽度之和
• 开发者工具排查步骤：
  1. 按F12打开Elements面板，定位Canvas 3所在的.sb元素
  2. 检查该元素及父元素的width、margin、padding属性
  3. 确认是否有绝对定位/浮动元素超出容器范围，导致页面宽度被撑开

修改后完整代码 #

<style>
body {
  width: auto !important;
  overflow-x: hidden;
}

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

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

.sib-header-menu-keep-this {
  z-index: 5;
}
</style>

<script>
function initHorizontalScroll() {
  const mediaQuery = window.matchMedia('(min-width: 700px)');
  const scrollContainer = document.querySelector(".sp");
  if (!scrollContainer) return;

  if (mediaQuery.matches) {
    let totalWidth = 0;
    const sbElements = document.getElementsByClassName('sb');
    for (let i = 0; i < sbElements.length; i++) {
      totalWidth += sbElements[i].offsetWidth;
    }
    scrollContainer.style.width = `${totalWidth}px`;

    window.addEventListener("wheel", (evt) => {
      evt.preventDefault();
      scrollContainer.scrollLeft += evt.deltaY;
    }, { passive: false });

    document.documentElement.style.overflowX = 'hidden';
  } else {
    scrollContainer.style.width = '100%';
    window.removeEventListener("wheel", initHorizontalScroll);
  }
}

initHorizontalScroll();
window.addEventListener('resize', initHorizontalScroll);
</script>

内容的提问来源于stack exchange，提问作者denofdreamers