响应式网页设计：解决浏览器窗口动态调整时横向滚动到纵向滚动的切换问题

html {
  scroll-behavior: smooth;
}
@media only screen and (min-width: 1025px) {
    main {
        overflow-x: hidden; /* 隐藏横向溢出 */
        display: flex;     /* 启用Flex布局，常用于横向布局 */
    }

    section {
        min-width: 100vw!important; /* 确保每个section占据视口全宽 */
        min-height: 100vh!important; /* 确保每个section占据视口全高 */
    }
}

<script type="text/javascript">
    if (window.innerWidth > 1025) {
       const scrollContainer = document.querySelector("main");

        scrollContainer.addEventListener("wheel", (evt) => {
            evt.preventDefault(); // 阻止默认的纵向滚动
            scrollContainer.scrollLeft += evt.deltaY; // 将滚轮事件转换为横向滚动
        });
    } else {
        // 此处为空，意味着小于1025px时没有特定的滚动逻辑
}
</script>

html {
  scroll-behavior: smooth;
}

/* 宽屏模式：横向滚动布局 */
@media only screen and (min-width: 1025px) {
    main {
        overflow-x: hidden; /* 隐藏横向溢出，因为我们用JS控制横向滚动 */
        overflow-y: hidden; /* 隐藏纵向溢出，确保纯横向滚动 */
        display: flex;      /* 启用Flex布局，将内容横向排列 */
        flex-wrap: nowrap;  /* 防止内容换行 */
    }

    section {
        min-width: 100vw !important; /* 每个section占据视口全宽 */
        min-height: 100vh !important; /* 每个section占据视口全高 */
        flex-shrink: 0; /* 防止section缩小 */
    }
}

/* 窄屏模式：纵向滚动布局 */
@media only screen and (max-width: 1024px) { /* 注意这里使用 max-width 1024px */
    main {
        overflow-x: hidden; /* 确保没有横向滚动条 */
        overflow-y: auto;   /* 允许纵向滚动 */
        display: block;     /* 恢复块级布局，使内容纵向堆叠 */
        height: auto;       /* 允许高度自适应内容 */
        width: 100%;        /* 确保宽度占满 */
    }

    section {
        min-width: auto; /* 移除固定宽度限制 */
        min-height: auto; /* 移除固定高度限制 */
        height: auto;     /* 允许高度自适应内容 */
        width: 100%;      /* 确保宽度占满 */
    }
}

<script type="text/javascript">
    const scrollContainer = document.querySelector("main");
    let currentScrollHandler = null; // 用于存储当前的滚动事件处理函数

    function handleScroll(evt) {
        // 根据当前的滚动模式执行不同的操作
        if (window.innerWidth > 1024) { // 横向滚动模式
            evt.preventDefault();
            scrollContainer.scrollLeft += evt.deltaY;
        } else { // 纵向滚动模式，不阻止默认行为，让浏览器自行处理
            // 如果需要自定义纵向滚动，可以在这里添加逻辑，但通常不需要
        }
    }

    function setupScrollBehavior() {
        // 先移除所有可能存在的滚动监听器，避免重复绑定
        if (currentScrollHandler) {
            scrollContainer.removeEventListener("wheel", currentScrollHandler);
            currentScrollHandler = null;
        }

        if (window.innerWidth > 1024) {
            // 宽屏模式：添加横向滚动监听器
            currentScrollHandler = (evt) => {
                evt.preventDefault();
                scrollContainer.scrollLeft += evt.deltaY;
            };
            scrollContainer.addEventListener("wheel", currentScrollHandler);
        } else {
            // 窄屏模式：不添加特殊的滚动监听器，让浏览器处理默认的纵向滚动
            // 如果需要，可以在这里添加一个处理纵向滚动的监听器，但通常不必要
            // currentScrollHandler = (evt) => {
            //     evt.preventDefault();
            //     scrollContainer.scrollTop += evt.deltaY;
            // };
            // scrollContainer.addEventListener("wheel", currentScrollHandler);
        }
    }

    // 页面加载时立即设置滚动行为
    document.addEventListener("DOMContentLoaded", setupScrollBehavior);

    // 监听窗口大小调整事件，动态更新滚动行为
    // 建议对 resize 事件进行防抖处理，以提高性能
    let resizeTimer;
    window.addEventListener("resize", () => {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(setupScrollBehavior, 200); // 200ms 防抖
    });
</script>