咨询：实现类似yuga.com的滚动交互可用哪些工具？

可用工具 #

• 原生JS+CSS：借助Intersection Observer监听区块可见状态，搭配CSS的scroll-snap、transform实现横向滚动，再通过控制overflow锁定页面滚动，无依赖且灵活性拉满，适合自定义需求强的场景。
• GSAP：带ScrollTrigger插件的动画库，能轻松绑定滚动位置与交互状态，快速实现区块横向滚动触发、页面滚动锁定/解锁等复杂逻辑，上手快且效果流畅。
• ScrollMagic：专注滚动驱动动画的库，可将滚动进度与动画行为绑定，配合Tween类库实现精准的滚动交互控制。
• Lenis：轻量级平滑滚动库，支持自定义滚动行为，结合Intersection Observer就能实现区块滚动时的页面锁定，适合追求流畅滚动体验的项目。

你的滚动锁定代码优化建议 #

当前代码仅实现了页面锁定逻辑，缺少横向滚动完成后的解锁逻辑，且硬编码的setTimeout可能导致时机偏差，这里给出优化方案：

优化后的核心逻辑 #

// 监听横向滚动是否到达尽头
const handleHorizontalScroll = (e: Event) => {
  const target = e.target as HTMLElement;
  // 10px容错值，避免因为精度问题无法触发
  const isScrollEnd = target.scrollLeft + target.clientWidth >= target.scrollWidth - 10;
  if (isScrollEnd) {
    setFixed(false);
    document.body.style.overflow = "";
    // 滚动完成后移除监听，避免冗余触发
    target.removeEventListener('scroll', handleHorizontalScroll);
  }
};

const screenLock = (entries: IntersectionObserverEntry[]) => {
  if (window.innerWidth < 790) return;
  const entry = entries[0];
  const targetBlock = entry.target as HTMLElement;

  if (entry.isIntersecting) {
    if (!props.ignoreFixed) {
      setFixed(true);
      document.body.style.overflow = "hidden";
      // 给横向滚动区块添加滚动监听
      targetBlock.addEventListener('scroll', handleHorizontalScroll);
    }
  } else {
    // 区块离开视口时解锁页面（可根据业务需求调整是否保留此逻辑）
    setFixed(false);
    document.body.style.overflow = "";
    targetBlock.removeEventListener('scroll', handleHorizontalScroll);
  }
};

配合CSS提升滚动体验 #

给横向滚动区块添加scroll-snap属性，让滚动更规整：

.horizontal-scroll-block {
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  /* 可选：隐藏滚动条 */
  scrollbar-width: none;
}
.horizontal-scroll-block::-webkit-scrollbar {
  display: none;
}
.horizontal-scroll-block .block-item {
  scroll-snap-align: start;
}

内容的提问来源于stack exchange，提问作者Кирилл Лапшин