本文介绍在 react 应用中监听页面或容器的滚动事件，动态驱动文字水平位移，实现流畅的侧向滚动文本效果，适用于数字看板、跑马灯、信息流横幅等场景。
本文介绍在 react 应用中监听页面或容器的滚动事件，动态驱动文字水平位移，实现流畅的侧向滚动文本效果，适用于数字看板、跑马灯、信息流横幅等场景。
在 React 中实现“随用户滚动而横向移动的文字”，核心思路是将垂直滚动行为（scrollY 或容器 scrollTop）映射为文本的水平偏移量（transform: translateX()），而非简单触发一次动画。这能创造视差式或联动式交互体验。
✅ 基础实现（监听窗口滚动）
import { useState, useEffect } from 'react';
export default function SideScrollingText() {
const [offset, setOffset] = useState(0);
useEffect(() => {
const handleScroll = () => {
// 将页面垂直滚动距离按比例转为负向 X 位移（向左滚动）
const scrollRatio = window.scrollY / 3; // 可调灵敏度：数值越小，滚动越“慢”
setOffset(-scrollRatio);
};
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);
return (
<div style="{{" height: overflow: position:>
<p style="{{" position: left: top: transform: translatex whitespace: fontsize: fontweight: color: fontfamily:>
SCROLL TO MOVE ME SIDEWAYS — React Side-Scroll Effect
</p>
</div>
);
}
✅ 进阶方案：容器内滚动（更可控）
若需绑定到特定滚动容器（如
），请改用 ref 监听其 scroll 事件：
const SideScrollingTextInContainer = () => {
const containerRef = useRef<htmldivelement>(null);
const [offset, setOffset] = useState(0);
useEffect(() => {
const container = containerRef.current;
if (!container) return;
const handleScroll = () => {
const ratio = container.scrollTop / 2; // 向上滚动 → 文字向右移动
setOffset(ratio);
};
container.addEventListener('scroll', handleScroll);
return () => container.removeEventListener('scroll', handleScroll);
}, []);
return (
<div ref="{containerRef}" style="{{" height: overflowy: border: solid padding:>
<div style="{{" transform: display: whitespace: fontsize:>
? This text scrolls horizontally as you scroll this box vertically!
</div>
</div>
);
};</htmldivelement>
⚠️ 注意事项与优化建议
- 性能优先：务必使用 throttle 或 requestAnimationFrame 包裹 handleScroll，避免高频重绘（尤其在长列表中）。可借助 lodash.throttle 或自定义节流钩子；
- 响应式适配：offset 计算应结合 window.innerWidth 或容器宽度做归一化，确保不同屏幕下位移比例协调；
-
可访问性：纯视觉动效需提供关闭选项（如 prefers-reduced-motion 查询），例如：
@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; } } - SEO 与语义：滚动文本不宜承载关键信息；重要文案仍需静态呈现，横向滚动仅作增强展示。
通过合理映射滚动输入与 CSS 变换输出，你可以在 React 中轻量、高效地构建富有表现力的侧向滚动文本——它不是动画循环，而是真实滚动状态的视觉映射。
