虚拟滚动可通过“循环缓冲区+位置映射”模拟无线循环效果，核心是用固定长度数据池配合极大滚动高度与取模渲染，并通过双缓冲、预加载和滚动微调实现抖音式无缝体验。
虚拟滚动本身不直接支持“无线循环”，但通过“循环缓冲区 + 位置映射”策略，可以模拟出视觉上无限上下滑动的效果，就像抖音那样——内容看似永远刷不完，实际只渲染视口附近少量节点。
核心思路：用有限数据模拟无限空间
不是真的加载无限多条数据，而是让列表的滚动高度“逻辑上无限”，同时将用户当前滚动位置映射到一个固定长度的数据池中（比如 20 条），再动态更新首尾数据以维持连续感。
-
滚动容器高度设为极大值（如
1000000px），让浏览器允许大幅滚动； -
真实数据保持小数组（例如
const pool = [item0, item1, ..., item19]）； -
根据 scrollTop 计算“逻辑索引”：假设每项高 600px，则逻辑序号
i = Math.floor(scrollTop / 600) % pool.length； -
渲染时偏移取模：第 n 行显示的是
pool[(i + n) % pool.length]，实现无缝轮转。
关键技巧：双缓冲 + 预加载边界
纯取模会暴露重复感（比如滑到底突然回到开头）。更自然的做法是维护一个略大于视口的“活动窗口”，并在滚动接近边界时平滑替换首尾批次：
- 维持一个长度为
visibleCount + 4的渲染数组（如视口可见 3 项，就渲染 7 项）； - 监听
scroll或使用 IntersectionObserver，当顶部/底部元素即将离开视口时，把对应方向的新数据“推入”并“弹出”旧数据； - 每次更新后，用
scrollTo({ top: newOffset, behavior: 'auto' })微调滚动位置，掩盖重排跳动（例如补偿 1 个 item 高度）。
抖音式体验的增强细节
真实短视频流还依赖服务端配合与客户端状态管理：
-
服务端分页要支持“锚点续传”：不依赖 page=1/2/3，而是传
cursor=xxx（如最后一条视频的 timestamp 或 id），保证刷新/回退不丢进度； - 本地缓存已播状态与播放位置：即使 item 被复用，也能恢复上次的 video.currentTime 和 mute 状态；
- 预加载下一批数据：在用户滑动加速时提前 fetch 后续 5～10 条，避免白屏或 loading 卡顿；
-
滚动惯性与吸顶优化：用
overscroll-behavior: contain防止页面整体拖拽，配合scroll-snap-type实现卡片级吸附。
轻量实现参考（React + useRef）
不用复杂库，几行逻辑就能跑起来：
const [items, setItems] = useState(Array.from({ length: 20 }, (_, i) => ({ id: i })));
const containerRef = useRef();
const scrollOffset = useRef(0);
<p>useEffect(() => {
const handleScroll = () => {
const { scrollTop, clientHeight, scrollHeight } = containerRef.current;
scrollOffset.current = scrollTop;</p><pre class="brush:php;toolbar:false;">// 接近底部？插入新 batch 并移除顶部
if (scrollHeight - scrollTop - clientHeight [...prev.slice(5), ...genNextBatch()]);
}}; containerRef.current?.addEventListener('scroll', handleScroll); return () => containerRef.current?.removeEventListener('scroll', handleScroll); }, []);
// 渲染时：index 对应逻辑位置，实际取 items[(index + offset) % items.length]
不复杂但容易忽略：滚动映射必须用 整数像素精度对齐，否则会出现 1px 抖动；所有高度计算建议用 getBoundingClientRect() 动态读取，而非写死数值。
