如何将桌面端竖滑控制的横向滚动图片画廊适配为移动端竖滑控制的纵向滚动画廊

我来帮你梳理下当前代码的问题，然后给出修复方案～

首先看你的代码，核心问题有几个：

• isMobile是初始化时计算的常量，窗口大小变化（比如桌面窗口拉窄、移动端旋转屏幕）时不会更新，导致逻辑无法切换
• 移动端的滚轮事件逻辑有误：GSAP的属性是小写的y不是大写Y，而且没必要用GSAP强制控制纵向滚动——移动端直接让浏览器默认处理纵向滚动更自然，反而自定义控制容易和默认行为冲突
• 窗口resize时没有同步更新适配状态，比如从桌面切到移动端后，之前的横向滚动偏移不会重置

下面是修改后的完整代码，我会在后面解释关键改动：

<script>
  import { gsap } from "gsap";

  let target = 0;
  let current = 0;
  let ease = 0.075;
  const sliderWrapper = document.querySelector(".slider-wrapper");
  let maxScroll = sliderWrapper?.offsetWidth - window.innerWidth;

  // 改成函数，每次需要判断时实时获取当前窗口状态
  function isMobile() {
    return window.innerWidth <= 768;
  }

  function lerp(start, end, factor) {
    return start + (end - start) * factor;
  }

  function update() {
    if (!isMobile()) {
      // 只有非移动端时才执行横向滚动的lerp逻辑
      current = lerp(current, target, ease);
      gsap.set(".slider-wrapper", {
        x: -current,
      });
    } else {
      // 移动端时重置transform，恢复正常文档流滚动
      gsap.set(".slider-wrapper", {
        x: 0,
        y: 0,
      });
    }
    requestAnimationFrame(update);
  }

  function handleWheel(e) {
    if (!isMobile()) {
      // 桌面端：用滚轮控制横向滚动，阻止默认纵向滚动
      target += e.deltaY;
      e.preventDefault();
      // 限制滚动范围，避免超出边界
      target = Math.max(0, target);
      target = Math.min(maxScroll, target);
    }
    // 移动端：啥也不做，让浏览器默认处理纵向滚动
  }

  window.addEventListener("resize", () => {
    // 每次resize时重新计算maxScroll，同时重置target和current避免偏移残留
    maxScroll = sliderWrapper?.offsetWidth - window.innerWidth;
    if (isMobile()) {
      target = 0;
      current = 0;
    }
  });

  // 只绑定一次滚轮事件，在回调里实时判断当前设备状态
  window.addEventListener("wheel", handleWheel);

  update();
</script>

关键改动说明：

• 动态判断设备状态：把isMobile改成函数，每次需要判断时都获取当前窗口宽度，解决窗口大小变化后逻辑不更新的问题
• 统一滚轮事件处理：不再初始化时绑定两个不同的滚轮事件，而是绑定一个统一的事件回调，在回调里实时判断当前是桌面还是移动端，分别处理
• 移动端恢复默认滚动：移动端时不阻止滚轮默认行为，同时在update函数里重置sliderWrapper的transform，让画廊回到正常的纵向文档流，由浏览器处理自然滚动
• resize时重置状态：窗口大小变化时，如果切换到移动端，重置target和current，避免残留的横向偏移影响布局

这样修改后，桌面端依然保持竖滑控制横向滚动的逻辑，移动端则自动切换为正常的纵向滚动，而且窗口大小变化时也能实时适配～

备注：内容来源于stack exchange，提问作者troyofcreative