Next.js+Tailwind全屏分段滚动异常求助：跳段、卡顿及粘性布局兼容

核心需求 #

• 使用Next.js + Tailwind CSS开发前端应用，每个section占满视口高度（100vh）
• 实现逐段滚动效果（类似scroll snapping），每次滚动精准切换一个section
• 每个section通过md:sticky top-0实现堆叠动画效果

当前实现 #

通过wheel事件手动处理滚动：

useEffect(() => {
  if (window.innerWidth < 1024) return;

  let isAnimating = false;
  let accumulatedDelta = 0;

  const SCROLL_THRESHOLD = 80;

  const handleWheel = (e: WheelEvent) => {
    e.preventDefault();

    if (isAnimating) return;

    accumulatedDelta += e.deltaY;

    if (Math.abs(accumulatedDelta) < SCROLL_THRESHOLD) return;

    const direction = accumulatedDelta > 0 ? 1 : -1;
    accumulatedDelta = 0;

    isAnimating = true;

    window.scrollBy({
      top: direction * window.innerHeight,
      behavior: "smooth",
    });

    const unlock = () => {
      isAnimating = false;
    };

    if ("onscrollend" in window) {
      const onEnd = () => {
        unlock();
        window.removeEventListener("scrollend", onEnd);
      };
      window.addEventListener("scrollend", onEnd);
    } else {
      setTimeout(unlock, 600);
    }
  };

  window.addEventListener("wheel", handleWheel, { passive: false });

  return () => {
    window.removeEventListener("wheel", handleWheel);
  };
}, []);

遇到的问题 #

• 有时滚动会跳过多个section
• 偶尔会卡在两个section之间
• 不同设备（触控板/鼠标滚轮）表现不一致
• sticky布局似乎干扰滚动定位

预期目标 #

• 平滑逐段滚动（一次滚动切换一个section）
• 无跳段、抖动问题
• 多设备稳定兼容
• 适配position: sticky堆叠布局

已尝试方案 #

• 累加deltaY并设置触发阈值
• 用isAnimating锁定滚动
• 使用scrollend（带超时 fallback）
• 尝试过CSS scroll snapping但未达预期

疑问 #

1. 是否应放弃wheel事件处理，改用CSS scroll snapping？
2. 有没有更优的滚动锁定和动画完成检测方案？
3. position: sticky是否会导致布局/滚动异常？

补充信息 #

• 仅桌面端生效（< 1024px时禁用）
• 每个section为100vh
• 使用Tailwind工具类md:sticky top-0

组件及示例section #

页面组件代码 #

export function HomePageClient() {
  const [coords, setCoords] = useState({
    homeY: 0,
    aboutY: 0,
    contactY: 0,
  });

  // 滚动到指定section
  const scrollToSection = (id: string) => {
    const el = document.getElementById(id);
    if (!el) return;

    el.scrollIntoView({
      behavior: "smooth",
      block: "start",
    });
  };

  // 测量各section位置（用于导航）
  const measureCoords = () => {
    const getY = (id: string) => {
      const el = document.getElementById(id);
      if (!el) return 0;
      return window.scrollY + el.getBoundingClientRect().top;
    };

    setCoords({
      homeY: getY("hero"),
      aboutY: getY("about"),
      contactY: getY("contact"),
    });
  };

  // 初始加载+窗口 resize 时测量位置
  useEffect(() => {
    const handler = () => measureCoords();

    window.addEventListener("load", handler);
    window.addEventListener("resize", handler);

    return () => {
      window.removeEventListener("load", handler);
      window.removeEventListener("resize", handler);
    };
  }, []);

  // 处理URL hash定位
  useEffect(() => {
    const hash = window.location.hash.replace("#", "");
    if (!hash) return;
    setTimeout(() => {
      scrollToSection(hash);
    }, 150);
  }, []);

  // 自定义滚动逻辑
  useEffect(() => {
    if (window.innerWidth < 1024) return;

    let isAnimating = false;
    let accumulatedDelta = 0;

    const SCROLL_THRESHOLD = 80; // 可调整阈值

    const handleWheel = (e: WheelEvent) => {
      e.preventDefault();

      if (isAnimating) return;

      accumulatedDelta += e.deltaY;

      // 达到阈值才触发滚动
      if (Math.abs(accumulatedDelta) < SCROLL_THRESHOLD) return;

      const direction = accumulatedDelta > 0 ? 1 : -1;
      accumulatedDelta = 0;

      isAnimating = true;

      window.scrollBy({
        top: direction * window.innerHeight,
        behavior: "smooth",
      });

      // 解锁滚动状态
      const unlock = () => {
        isAnimating = false;
      };

      // 优先使用原生scrollend事件
      if ("onscrollend" in window) {
        const onEnd = () => {
          unlock();
          window.removeEventListener("scrollend", onEnd);
        };
        window.addEventListener("scrollend", onEnd);
      } else {
        // 降级为超时解锁
        setTimeout(unlock, 600);
      }
    };

    window.addEventListener("wheel", handleWheel, { passive: false });

    return () => {
      window.removeEventListener("wheel", handleWheel);
    };
  }, []);

  return (
    <div className="md:h-screen">
      <Preloader onEnter={measureCoords} />

      <div className="relative antialiased">
        <Navbar YCordinates={coords} />

        <main className="relative">
          <Hero />
          <About />
          <Contact />
        </main>

        <Footer />
      </div>
    </div>
  );
}

示例Section代码 #

<section
      id="hero"
      className="relative md:sticky top-0 md:h-screen min-h-[100dvh] lg:min-h-screen overflow-hidden max-w-[88rem] mx-auto flex flex-col z-2"
      style={{ backgroundColor: "var(--bg-depth-1)" }}
      aria-labelledby="hero-heading"
    >
--- 内容 ---
</section>

请求指导 #

若有开发者实现过类似（尤其是粘性堆叠布局）的功能，恳请提供可行方案指导。

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