本文介绍在 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: '100vh',
overflow: 'hidden',
position: 'relative'
}}>
<p
style={{
position: 'absolute',
left: '50%',
top: '50%',
transform: `translate(-50%, -50%) translateX(${offset}px)`,
whiteSpace: 'nowrap',
fontSize: '2rem',
fontWeight: 'bold',
color: '#333',
fontFamily: 'monospace',
}}
>
SCROLL TO MOVE ME SIDEWAYS — React Side-Scroll Effect
</p>
</div>
);
}✅ 进阶方案：容器内滚动（更可控）
若需绑定到特定滚动容器（如 <div className="scroller">），请改用 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: '300px',
overflowY: 'scroll',
border: '1px solid #ccc',
padding: '1rem'
}}
>
<div
style={{
transform: `translateX(${offset}px)`,
display: 'inline-block',
whiteSpace: 'nowrap',
fontSize: '1.4rem',
}}
>
? This text scrolls horizontally as you scroll this box vertically!
</div>
</div>
);
};⚠️ 注意事项与优化建议
- 性能优先：务必使用 throttle 或 requestAnimationFrame 包裹 handleScroll，避免高频重绘（尤其在长列表中）。可借助 lodash.throttle 或自定义节流钩子；
- 响应式适配：offset 计算应结合 window.innerWidth 或容器宽度做归一化，确保不同屏幕下位移比例协调；
-
可访问性：纯视觉动效需提供关闭选项（如 prefers-reduced-motion 查询），例如：
@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; } } - SEO 与语义：滚动文本不宜承载关键信息；重要文案仍需静态呈现，横向滚动仅作增强展示。
通过合理映射滚动输入与 CSS 变换输出，你可以在 React 中轻量、高效地构建富有表现力的侧向滚动文本——它不是动画循环，而是真实滚动状态的视觉映射。
