本文介绍在 React 应用中监听页面或容器滚动事件，动态控制文字水平位移，实现流畅的侧向滚动文本效果，核心依赖 onScroll 事件与 CSS 变换（如 transform: translateX）结合。
本文介绍在 react 应用中监听页面或容器滚动事件，动态控制文字水平位移，实现流畅的侧向滚动文本效果，核心依赖 `onscroll` 事件与 css 变换（如 `transform: translatex`）结合。
要实现“随用户滚动而横向移动的文字”，关键在于将垂直滚动距离映射为水平位移量。这不是简单的“滚动即触发动画”，而是建立滚动位置（scrollY 或 scrollTop）与文本 translateX 值之间的响应式关系。
以下是一个轻量、可复用的 React 实现示例：
import React, { useRef, useEffect, useState } from 'react';
const SideScrollingText = () => {
const containerRef = useRef<htmldivelement>(null);
const [offsetX, setOffsetX] = useState(0);
useEffect(() => {
const handleScroll = () => {
if (!containerRef.current) return;
// 获取相对于容器顶部的滚动偏移（适用于内部容器滚动）
const scrollY = containerRef.current.scrollTop;
// 滚动1px → 文字向左移动0.5px（可调灵敏度）
setOffsetX(-scrollY * 0.5);
};
const container = containerRef.current;
if (container) {
container.addEventListener('scroll', handleScroll, { passive: true });
return () => container.removeEventListener('scroll', handleScroll);
}
}, []);
return (
<div ref="{containerRef}" style="{{" height: overflowy: border: solid padding:>
<div style="{{" whitespace: fontsize: fontweight: transform: transition: ease-out>
这是一段超长的横向滚动文字 —— 随着你向上/向下滚动，它会向左/右平滑移动！
</div>
</div>
);
};
export default SideScrollingText;</htmldivelement>
✅ 关键要点说明：
- 使用 useRef 获取滚动容器 DOM 引用，避免重复渲染干扰；
- useEffect 中绑定 scroll 事件，务必启用 { passive: true } 提升滚动性能；
- transform: translateX 比修改 left 或 margin-left 更高效（不触发重排）；
- transition 时间建议设为 0.03–0.08s：太短易抖动，太长则滞后；
- 若需全页滚动响应（而非容器内滚动），可监听 window.addEventListener('scroll', ...)，并用 window.scrollY 替代 scrollTop。
⚠️ 注意事项：
- 避免在 onScroll 回调中执行重计算或 setState 频繁更新（本例已通过防抖逻辑外置+被动事件优化）；
- 移动端需注意 touchmove 兼容性，如需支持，可补充 ontouchmove 或使用 IntersectionObserver + requestAnimationFrame 做更高级的滚动解耦；
- 文字内容应设 whiteSpace: nowrap 并确保父容器宽度足够容纳完整文本，否则可能被截断。
通过该模式，你不仅能实现视觉联动的侧滑文字，还可拓展为视差滚动、滚动驱动动画等交互场景——核心思想始终是：将滚动输入作为状态驱动源，以声明式方式映射到 UI 输出。
