本文介绍如何在 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: margin: transition: ease-out>
? This text scrolls horizontally as you drag the content below →
</h2>
{/* 可横向滚动的内容容器（用户交互区） */}
<div ref="{scrollContainerRef}" onscroll="{handleScroll}" style="{{" overflowx: overflowy: whitespace: padding: scrollbarwidth:>
<span style="{{" display: marginright:>Item 1</span>
<span style="{{" display: marginright:>Item 2</span>
<span style="{{" display: marginright:>Item 3</span>
<span style="{{" display: marginright:>Item 4</span>
<span style="{{" display: marginright:>Item 5</span>
<span style="{{" display: marginright:>Item 6</span>
</div>
</div>
);
};
export default SideScrollingText;</htmldivelement></htmldivelement>
✅ 关键要点说明：
- 使用 ref 精准获取滚动容器，避免因事件冒泡导致误判；
- scrollLeft 值为像素级整数，适合直接用于 transform 计算，性能优于 setState 频繁更新 DOM 属性；
- 添加 transition: transform 0.05s ease-out 可显著提升视觉流畅度，避免跳变；
- 若需更精细控制（如弹性回弹、惯性滚动），建议结合 useEffect + requestAnimationFrame 或使用 react-use 的 useScroll Hook；
- 注意移动端兼容性：确保容器启用 -webkit-overflow-scrolling: touch（iOS Safari）并测试触摸拖拽响应。
该方案轻量、无第三方依赖，适用于产品页 banner 标题联动、数据看板指标导航、创意型引导文案等场景。
