React应用中如何通过用户滚动操作触发横向滚动文本

嘿，这个需求挺实用的！我来给你一步步拆解在React里怎么实现——核心思路就是监听页面的垂直滚动事件，把滚动距离转换成横向文本的偏移量，直接上干货：

1. 先搭好基础组件结构 #

首先得有一个能横向滚动的文本容器，还有足够的页面内容让用户能滚动。这里用函数组件举例：

import { useState, useEffect } from 'react';

function HorizontalScrollText() {
  // 用来存储横向文本的偏移量
  const [scrollOffset, setScrollOffset] = useState(0);

  // 后续逻辑会写在这里

  return (
    <div className="page-container">
      {/* 先放些占位内容，让页面有滚动空间 */}
      <div style={{ height: '2000px', padding: '20px', backgroundColor: '#f5f5f5' }}>
        往下滚动页面，看看下面的文本会不会动起来😉
      </div>

      {/* 横向文本的外层容器（隐藏超出部分） */}
      <div className="horizontal-text-wrapper">
        {/* 实际的横向文本，通过transform控制偏移 */}
        <div 
          className="horizontal-text"
          style={{ transform: `translateX(${scrollOffset}px)` }}
        >
          这是一段超长的横向滚动文本，当你垂直滚动页面时，我会跟着横向移动哦～ 可以随便添加更多内容让我变得更长，测试起来更明显！比如：React 横向滚动 触发 滚动事件 自定义动画 性能优化...
        </div>
      </div>
    </div>
  );
}

export default HorizontalScrollText;

再配上基础样式，确保文本能横向排列且超出部分被隐藏：

.horizontal-text-wrapper {
  width: 100%;
  overflow: hidden;
  border: 1px solid #e0e0e0;
  padding: 15px;
  margin-top: 20px;
}

.horizontal-text {
  white-space: nowrap; /* 强制文本不换行 */
  display: inline-block;
  font-size: 19px;
  color: #333;
}

2. 添加滚动监听，计算横向偏移 #

接下来用useEffect监听页面的滚动事件，把垂直滚动的比例转换成横向文本的偏移量：

useEffect(() => {
  const handleScroll = () => {
    // 1. 获取当前垂直滚动的距离
    const verticalScrollDistance = window.scrollY;
    // 2. 计算页面总共能滚动的垂直高度
    const totalScrollableHeight = document.documentElement.scrollHeight - window.innerHeight;
    // 3. 算出滚动的比例（0到1之间，0是顶部，1是底部）
    const scrollRatio = verticalScrollDistance / totalScrollableHeight;

    // 4. 获取横向文本超出容器的宽度（也就是能横向滚动的总距离）
    const textElement = document.querySelector('.horizontal-text');
    const wrapperElement = document.querySelector('.horizontal-text-wrapper');
    if (!textElement || !wrapperElement) return;
    
    const totalHorizontalScrollWidth = textElement.offsetWidth - wrapperElement.offsetWidth;
    // 5. 计算最终的横向偏移量：负数是向左滚动，正数向右，可按需调整
    const horizontalOffset = -scrollRatio * totalHorizontalScrollWidth;

    // 更新偏移量状态
    setScrollOffset(horizontalOffset);
  };

  // 添加滚动监听
  window.addEventListener('scroll', handleScroll);
  // 组件卸载时记得移除监听，避免内存泄漏
  return () => window.removeEventListener('scroll', handleScroll);
}, []);

3. 性能优化：给滚动事件加节流 #

滚动事件会触发得非常频繁，直接更新状态可能导致性能问题，所以给handleScroll加个节流函数，限制触发频率：

// 先写一个简单的节流工具函数
const throttle = (func, delay = 16) => {
  let lastExecutionTime = 0;
  return (...args) => {
    const now = Date.now();
    if (now - lastExecutionTime >= delay) {
      func(...args);
      lastExecutionTime = now;
    }
  };
};

// 然后修改useEffect里的监听逻辑
useEffect(() => {
  const handleScroll = () => {
    // 这里是原来的逻辑，不变
    const verticalScrollDistance = window.scrollY;
    const totalScrollableHeight = document.documentElement.scrollHeight - window.innerHeight;
    const scrollRatio = verticalScrollDistance / totalScrollableHeight;

    const textElement = document.querySelector('.horizontal-text');
    const wrapperElement = document.querySelector('.horizontal-text-wrapper');
    if (!textElement || !wrapperElement) return;
    
    const totalHorizontalScrollWidth = textElement.offsetWidth - wrapperElement.offsetWidth;
    const horizontalOffset = -scrollRatio * totalHorizontalScrollWidth;

    setScrollOffset(horizontalOffset);
  };

  // 用节流包装一下处理函数，16ms约等于60fps，兼顾流畅和性能
  const throttledHandleScroll = throttle(handleScroll, 16);
  window.addEventListener('scroll', throttledHandleScroll);
  
  return () => window.removeEventListener('scroll', throttledHandleScroll);
}, []);

4. 自定义滚动效果（可选） #

如果你想调整滚动方向、速度或者触发逻辑，只需要修改horizontalOffset的计算方式：

• 反向滚动（向右滚）：把-scrollRatio改成scrollRatio
• 加快滚动速度：给totalHorizontalScrollWidth乘个系数，比如*1.5
• 基于滚动增量：记录上一次的scrollY，计算差值来更新偏移，适合做更灵活的动画

这样一套下来，就能实现用户滚动页面时，横向文本跟着滚动的效果啦～

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