虚拟滚动如何实现“无线循环”滚动？打造类似抖音无限刷新列表
先说一个核心事实：虚拟滚动本身并不直接支持“无线循环”。但别急，通过一套“循环缓冲区+位置映射”的组合策略，完全可以模拟出视觉上无限上下滑动的效果。这就像抖音那样——内容看似永远刷不完，实际上，浏览器只老老实实地渲染着视口附近的那一小撮节点。
核心思路：用有限数据模拟无限空间
这里的诀窍在于，我们并不需要真的去加载无限多条数据。关键在于，要让列表的滚动高度在“逻辑上无限大”，同时巧妙地将用户当前的滚动位置，映射到一个固定长度的数据池里（比如就20条）。然后，动态地更新这个池子的首尾数据，从而维持那种连绵不绝的浏览错觉。
- 第一步，把滚动容器的高度设成一个极大的值（比如
1000000px），先让浏览器允许我们进行大幅度的滚动操作。 - 第二步，维持一个真实的小数据池（例如
const pool = [item0, item1, ..., item19]），这才是实际在内存中周转的内容。 - 第三步，根据滚动位置计算“逻辑索引”：假设每一项高度固定为600px，那么当前的逻辑序号就是
i = Math.floor(scrollTop / 600) % pool.length。 - 最后，渲染时进行偏移取模：最终显示在第n行的，实际上是
pool[(i + n) % pool.length]的数据。就这么一个简单的取模运算，无缝轮转的效果就实现了。
关键技巧：双缓冲 + 预加载边界
不过，如果只用上面基础的取模方法，细心的用户可能会在滑到底部时，突然看到内容跳回了开头，重复感就暴露了。要做得更自然，就得用点技巧：维护一个比实际视口略大的“活动窗口”，并在滚动接近边界时，平滑地替换首尾批次的数据。
- 通常，我们会维持一个长度为
visibleCount + 4的渲染数组（比如视口内能看到3项，那我们就渲染7项）。 - 通过监听
scroll事件，或者使用更高效的 IntersectionObserver API，来探测顶部或底部的元素何时即将离开视口。一旦触发，就把对应方向的新数据“推入”数组，同时把另一头的旧数据“弹出”。 - 每次数据更新、DOM重排后，记得用
scrollTo({ top: newOffset, beha vior: 'auto' })对滚动位置进行一次微调。这能巧妙地补偿一个item的高度变化，掩盖住页面那细微的跳动感。
抖音式体验的增强细节
要达到类似抖音那样流畅的短视频流体验，光靠前端的滚动技巧还不够，还需要服务端的配合与精细的客户端状态管理：
- 服务端分页要支持“锚点续传”：别再依赖传统的 page=1/2/3 参数了。应该传递一个
cursor=xxx（比如最后一条视频的时间戳或ID），这样才能保证用户刷新页面或后退再进入时，不会丢失当前的浏览进度。 - 本地缓存已播放状态与位置：即便一个视频Item因为数据池复用而被重新渲染，也要能立刻恢复用户上次观看的
video.currentTime和静音状态，体验才够连贯。 - 预加载下一批数据：在监测到用户滑动加速时，就应该提前 fetch 后续的5到10条数据，这样才能有效避免滑动过程中间出现白屏或 loading 卡顿。
- 滚动惯性与吸顶优化：使用
overscroll-beha vior: contain可以防止滚动列表时拖动到整个页面。再配合scroll-snap-type属性，就能轻松实现卡片级别的精准吸附效果。
轻量实现参考（React + useRef）
其实，不用引入复杂的第三方库，只用几行核心逻辑就能让这套机制跑起来。下面是一个简化的 React 实现思路：
const [items, setItems] = useState(Array.from({ length: 20 }, (_, i) => ({ id: i })));
const containerRef = useRef();
const scrollOffset = useRef(0);
useEffect(() => {
const handleScroll = () => {
const { scrollTop, clientHeight, scrollHeight } = containerRef.current;
scrollOffset.current = scrollTop;
// 接近底部？插入新 batch 并移除顶部
if (scrollHeight - scrollTop - clientHeight < 1200) {
setItems(prev => [...prev.slice(5), ...genNextBatch()]);
}
};
containerRef.current?.addEventListener('scroll', handleScroll);
return () => containerRef.current?.removeEventListener('scroll', handleScroll);
}, []);
在渲染时，关键的一步是：根据计算出的 index，去实际的数据池中取 items[(index + offset) % items.length] 对应的内容。
最后，分享一个不复杂但极其容易忽略的细节：滚动映射必须使用整数像素精度对齐，否则会出现恼人的1px抖动。此外，所有的高度计算都建议用 getBoundingClientRect() 动态读取，而不是在代码里写死固定数值，这样才能更好地应对动态内容。
