浏览器缩至1025px以下时网站无法切换为垂直滚动的问题

云上老周

2026-7-20

问题解决：桌面端窗口缩小后无法切换为垂直滚动

问题背景

网站在1025px以上采用水平滚动布局，1025px以下需切换为垂直滚动。但桌面端手动拖拽浏览器窗口缩小至1025px以下时，水平滚动逻辑未禁用，导致无法垂直滚动；实体移动设备上滚动正常。网站基于WordPress+Elementor Pro搭建，原有代码仅在页面加载时判断窗口宽度。

问题根源

原有JS代码仅在页面首次加载时执行一次宽度判断并绑定水平滚动事件，窗口尺寸改变后，之前绑定的wheel事件未被移除，evt.preventDefault()仍在生效，直接阻止了默认的垂直滚动行为。

修改后的完整代码

CSS（保留原有媒体查询逻辑）

html {
  scroll-behavior: smooth;
}
@media only screen and (min-width: 1025px) {
    main {
        overflow-x: hidden;
        display: flex;
    }

    section {
        min-width: 100vw!important;
        min-height: 100vh!important;
    }
}

JavaScript（核心修复）

// 封装滚动逻辑处理函数
function handleScrollBehavior() {
    const scrollContainer = document.querySelector("main");
    // 先移除旧的事件监听，避免重复绑定导致异常
    scrollContainer.removeEventListener("wheel", handleWheelScroll);

    if (window.innerWidth > 1025) {
        // 桌面端：绑定水平滚动事件
        scrollContainer.addEventListener("wheel", handleWheelScroll);
    }
    // 小屏设备：不绑定事件，恢复默认垂直滚动
}

// 水平滚动事件处理逻辑
function handleWheelScroll(evt) {
    evt.preventDefault();
    const scrollContainer = document.querySelector("main");
    scrollContainer.scrollLeft += evt.deltaY;
}

// 页面初始化时执行一次
handleScrollBehavior();

// 监听窗口尺寸变化，实时切换滚动逻辑
window.addEventListener("resize", handleScrollBehavior);