一、需求来得太快就像龙卷风
那是一个风和日丽的下午，我正在愉快地摸鱼（划掉）coding，突然领导一个闪现出现在我身后：
"小周啊，这个大屏的滚动列表一直在动，看得我头晕眼花，能不能优化一下？"
我心想："这不是很常见的需求吗？数据滚动展示，多高大上啊！"但嘴上还是乖巧地回答："好的领导，我马上优化！"
二、我滚得很有节奏感
于是，我开始了对滚动列表的改造工程。老版本就是简单粗暴地一直往上滚，跟永动机似的。这哪行啊！用户体验太差了！
经过我三天三夜的奋战（其实就半天），一个全新的、优雅的、智能的滚动组件诞生了！它拥有以下超能力：
- 智能暂停：鼠标移入暂停滚动，移出继续滚——再也不用担心看不清了！
- 优雅动画：不是生硬地跳转，而是丝滑过渡
- 高度可定制：想滚多快滚多快，想停多久停多久
- 响应式设计：不管屏幕大小怎么变，都能优雅应对
import { useRef } from 'react'
import { AutoScrollList, type AutoScrollListRef } from '@zhou96/auto-scroll-list'
type SampleData = {
id: number
title: string
description: string
}
const sampleData: SampleData[] = [
{ id: 1, title: '第一行内容', description: '这是第一行的详细描述信息' },
{
id: 2,
title: '第二行内容',
description: '这是第二行的详细描述信息，内容稍微长一些',
},
{ id: 3, title: '第三行内容', description: '这是第三行的详细描述' },
{
id: 4,
title: '第四行内容',
description: '这是第四行的详细描述信息，包含更多的文本内容，用于测试不同高度的行',
},
{ id: 5, title: '第五行内容', description: '这是第五行' },
{ id: 6, title: '第六行内容', description: '这是第六行的详细描述信息' },
{
id: 7,
title: '第七行内容',
description: '这是第七行的内容，用于演示滚动效果',
},
{
id: 8,
title: '第八行内容',
description: '最后一行内容，滚动到这里会触发回调',
},
{
id: 9,
title: '第九行内容',
description: '最后一行内容，滚动到这里会触发回调',
},
]
const renderRowItem = (item: (typeof sampleData)[0], index: number) => (
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '4px',
marginBottom: '8px',
}}
>
<div style={{ fontWeight: 500, color: '#1f2937' }}>{item.title}</div>
<div style={{ fontSize: '14px', color: '#6b7280' }}>{item.description}</div>
<div style={{ fontSize: '12px', color: '#9ca3af' }}>行号: {index + 1}</div>
</div>
)
export default function AutoScrollListExample() {
const scrollContainerRef = useRef<AutoScrollListRef>(null)
const handleReachBottom = () => {
console.log('Reached bottom of the list')
}
return (
<>
<div style={{ marginBottom: '24px' }}>
<button onClick={() => scrollContainerRef.current?.play()}>play</button>
<button onClick={() => scrollContainerRef.current?.pause()}>pause</button>
<button onClick={() => scrollContainerRef.current?.scrollToTop()}>scrollToTop</button>
</div>
<div style={{ width: '200px', height: '200px', background: '#f3f4f6' }}>
<AutoScrollList<SampleData>
ref={scrollContainerRef}
data={sampleData}
loop={true}
rowItem={renderRowItem}
autoPlay={true}
scrollDelay={2000}
onReachBottom={handleReachBottom}
/>
</div>
</>
)
}
三、领导的心思你别猜
就在我得意洋洋地提交代码，准备接受表扬的时候，另一位领导突然发话：
"这个大屏的数据列表...其实不需要滚动。"
我：？？？
![黑人问号脸.jpg]
那一刻，我仿佛听到了心碎的声音。但作为一个成熟的程序员，我选择...把它开源！
四、开源大法好！
既然领导不需要，但世界上总有需要的人！于是我把这个组件打包发布到了npm，取名为@zhou96/auto-scroll-list。
主要特点：
- 🎯 超级简单易用，API设计直观
- 🚀 性能优化，大数据量也不卡顿
- 🎨 高度可定制，满足各种滚动需求
- 🛠️ TypeScript支持，开发体验棒棒哒
安装方法：
bash
npm install @zhou96/auto-scroll-list
# 或者
yarn add @zhou96/auto-scroll-list
五、人生就像滚动的列表
这个故事告诉我们：
- 领导的需求就像六月的天气，说变就变
- 优秀的代码总会有用武之地，如果没有...那就开源吧！
- 做前端要学会"滚"的艺术——该滚的时候滚，该停的时候停
