如何在React中实现U型滚动效果？

核心思路 #

把6个屏幕分成主路径（1、2、3）和分支路径（4、5、6）：向下滚动时按1→2→3→4→5→6的顺序切换；向上回滚时，从6直接跳回3，再按3→2→1的顺序返回，形成U型滚动轨迹。

具体实现步骤 #

1. 基础布局设置 #

给每个屏幕设置全屏高度，关闭浏览器默认滚动，用CSS过渡实现平滑切换：

body {
  margin: 0;
  overflow: hidden; /* 隐藏默认滚动条，避免干扰自定义逻辑 */
}
.screen-container {
  position: relative;
  height: 100vh;
  width: 100%;
}
.screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  transition: transform 0.8s ease; /* 平滑过渡动画 */
}
/* 初始状态只显示屏幕1，给每个屏幕加背景色方便区分 */
.screen:nth-child(1) { transform: translateY(0); background: #ffcccc; }
.screen:nth-child(2) { transform: translateY(100%); background: #ccffcc; }
.screen:nth-child(3) { transform: translateY(200%); background: #ccccff; }
.screen:nth-child(4) { transform: translateY(300%); background: #ffcc99; }
.screen:nth-child(5) { transform: translateY(400%); background: #99ccff; }
.screen:nth-child(6) { transform: translateY(500%); background: #ff99cc; }

2. 滚动状态管理 #

用变量记录当前显示的屏幕索引，防止滚动动画过程中重复触发：

let currentScreen = 0; // 0对应屏幕1，1对应屏幕2...5对应屏幕6
let isScrolling = false; // 锁定状态，避免动画未完成时重复操作
const totalScreens = 6;

3. 滚动事件监听与逻辑处理 #

监听鼠标滚轮事件，判断滚动方向，执行U型切换逻辑：

window.addEventListener('wheel', handleScroll);

function handleScroll(e) {
  if (isScrolling) return;
  isScrolling = true;

  // 判断滚动方向：向下滚动deltaY为正，向上为负
  const isScrollDown = e.deltaY > 0;

  if (isScrollDown) {
    // 向下滚动：按顺序依次切换到下一个屏幕
    if (currentScreen < totalScreens - 1) {
      currentScreen++;
      updateScreenDisplay();
    }
  } else {
    // 向上回滚：U型核心逻辑
    if (currentScreen === 5) {
      // 从屏幕6直接跳转到屏幕3（对应索引2）
      currentScreen = 2;
      updateScreenDisplay();
    } else if (currentScreen > 0) {
      // 其他情况正常回滚到上一个屏幕
      currentScreen--;
      updateScreenDisplay();
    }
  }

  // 动画结束后解除锁定
  setTimeout(() => {
    isScrolling = false;
  }, 800);
}

// 更新所有屏幕的位置，显示当前选中的屏幕
function updateScreenDisplay() {
  const screens = document.querySelectorAll('.screen');
  screens.forEach((screen, index) => {
    const translateYValue = (index - currentScreen) * 100;
    screen.style.transform = `translateY(${translateYValue}%)`;
  });
}

4. 自定义调整（可选） #

如果需要修改回滚路径（比如想让6→5→3→2→1），直接调整向上滚动的逻辑即可：

// 示例：修改回滚路径为6→5→3→2→1
else {
  if (currentScreen === 5) {
    currentScreen = 4;
  } else if (currentScreen === 4) {
    currentScreen = 2;
  } else if (currentScreen > 0) {
    currentScreen--;
  }
  updateScreenDisplay();
}

• 触摸设备适配：可以添加touchstart和touchend事件，通过计算触摸滑动的距离判断方向，逻辑和滚轮事件一致。

补充说明 #

这个方案通过禁用浏览器默认滚动，用JavaScript控制屏幕的transform属性实现自定义滚动逻辑，完全满足U型滚动的需求，且过渡平滑，适合新手上手修改。

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