本文介绍如何在 React 应用中利用原生 onScroll 事件监听容器滚动，并动态驱动文字水平位移，实现平滑、响应式的侧向滚动文本效果。

本文介绍如何在 react 应用中利用原生 `onscroll` 事件监听容器滚动，并动态驱动文字水平位移，实现平滑、响应式的侧向滚动文本效果。

在 React 中实现“随用户滚动而触发的横向文字滚动”，核心思路并非监听页面全局滚动（如 window.onscroll），而是将文本嵌入一个可横向滚动的容器（如

），再通过 onScroll 事件捕获该容器的滚动偏移量（event.target.scrollLeft），并将其映射为另一段文本（例如标题栏、导语或装饰性跑马灯）的 CSS transform: translateX() 值，从而形成联动侧滑效果。

以下是一个简洁可靠的实现示例：

import React, { useState, useRef, useEffect } from 'react';

const SideScrollingText = () => {
  const [scrollOffset, setScrollOffset] = useState(0);
  const scrollContainerRef = useRef<HTMLDivElement>(null);

  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
    const target = e.target as HTMLDivElement;
    setScrollOffset(target.scrollLeft);
  };

  // 可选：同步滚动位置到其他元素（如顶部标题）
  useEffect(() => {
    const container = scrollContainerRef.current;
    if (!container) return;

    // 示例：让顶部标题以 1.5 倍速反向移动，增强视差感
    const titleEl = document.getElementById('side-scroll-title');
    if (titleEl) {
      titleEl.style.transform = `translateX(${-scrollOffset * 1.5}px)`;
    }
  }, [scrollOffset]);

  return (
    <div>
      {/* 同步滚动的标题（装饰性侧滑文本） */}
      <h2 
        id="side-scroll-title" 
        style={{
          whiteSpace: 'nowrap',
          margin: '1rem 0',
          transition: 'transform 0.05s ease-out', // 轻量级平滑过渡
        }}
      >
        ? This text scrolls horizontally as you drag the content below →
      </h2>

      {/* 可横向滚动的内容容器（用户交互区） */}
      <div
        ref={scrollContainerRef}
        onScroll={handleScroll}
        style={{
          overflowX: 'auto',
          overflowY: 'hidden',
          whiteSpace: 'nowrap',
          padding: '0.5rem 0',
          scrollbarWidth: 'thin',
        }}
      >
        <span style={{ display: 'inline-block', marginRight: '2rem' }}>Item 1</span>
        <span style={{ display: 'inline-block', marginRight: '2rem' }}>Item 2</span>
        <span style={{ display: 'inline-block', marginRight: '2rem' }}>Item 3</span>
        <span style={{ display: 'inline-block', marginRight: '2rem' }}>Item 4</span>
        <span style={{ display: 'inline-block', marginRight: '2rem' }}>Item 5</span>
        <span style={{ display: 'inline-block', marginRight: '2rem' }}>Item 6</span>
      </div>
    </div>
  );
};

export default SideScrollingText;

✅ 关键要点说明：

• 使用 ref 精准获取滚动容器，避免因事件冒泡导致误判；
• scrollLeft 值为像素级整数，适合直接用于 transform 计算，性能优于 setState 频繁更新 DOM 属性；
• 添加 transition: transform 0.05s ease-out 可显著提升视觉流畅度，避免跳变；
• 若需更精细控制（如弹性回弹、惯性滚动），建议结合 useEffect + requestAnimationFrame 或使用 react-use 的 useScroll Hook；
• 注意移动端兼容性：确保容器启用 -webkit-overflow-scrolling: touch（iOS Safari）并测试触摸拖拽响应。

该方案轻量、无第三方依赖，适用于产品页 banner 标题联动、数据看板指标导航、创意型引导文案等场景。