核心原理
- 只渲染可视区： 无论数据多少，DOM中仅存在约20-30个节点。
- 动态高度缓存： 首次渲染后测量真实高度并缓存，后续滚动直接查表计算位置。
- Absolute定位： 使用 transform/absolute 将元素放置在正确的位置，模拟完整列表。
界面如下：
codesandbox链接：https://codesandbox.io/p/sandbox/mkwwvp
原生js实现动态高度的虚拟列表
whuhewei2026-05-20 9:34
相关推荐
胡萝卜术17 小时前
当大模型遇上浏览器：用 React + WebGPU 在前端跑通 DeepSeek-R1 的实战笔记人间凡尔赛17 小时前
Next.js 16 生产级实战：Cache Components + View Transitions 完整指南朦胧之18 小时前
AI应用-消费流式输出谷哥的小弟21 小时前
TypeScript对象类型稚南城才子，乌衣巷风流21 小时前
函数：编程中的核心概念竹林8181 天前
用 ethers.js 连接 MetaMask 实现钱包登录：一个真实项目中的完整踩坑记录虚惊一场1 天前
在浏览器里跑 Prettier：格式化 Markdown 的四个难点前端炒粉1 天前
手撕小汇总虚惊一场1 天前
把 CodeMirror 6 调教成 Markdown 编辑器：扩展、装饰与门面虚惊一场1 天前
一条 Markdown 渲染管线的全部细节：Worker、源行标注与按需加载