核心原理
- 只渲染可视区： 无论数据多少，DOM中仅存在约20-30个节点。
- 动态高度缓存： 首次渲染后测量真实高度并缓存，后续滚动直接查表计算位置。
- Absolute定位： 使用 transform/absolute 将元素放置在正确的位置，模拟完整列表。
界面如下：
codesandbox链接：https://codesandbox.io/p/sandbox/mkwwvp
原生js实现动态高度的虚拟列表
whuhewei2026-05-20 9:34
相关推荐
之歆4 小时前
DAY_14JavaScript DOM 进阶：HTML DOM 接口、事件监听与经典交互实战布局呆星4 小时前
Pinia 综合笔记：介绍、两种 API、实例方法与持久化fxshy4 小时前
Vue 项目中 vis-network 点击节点不生效的问题排查：外层 transform 缩放导致坐标偏移Highcharts.js4 小时前
音频可视化图表开发｜基于 Highcharts 内置音频合成器制作音乐排行榜图代码Maimai108084 小时前
Redux Toolkit 项目落地：从 slice、thunk 到可维护的前端状态管理ZC跨境爬虫4 小时前
模块化烹饪小程序开发日记 Day3：（Flask后端初始化、数据库配置与自定义日志系统搭建）梵得儿SHI4 小时前
（第四篇）Spring AI 架构设计与优化：真实生产环境复盘，从 100ms 到 10ms 的响应提速全流程ZC跨境爬虫4 小时前
跟着 MDN 学 HTML day_64：从 object 到 iframe 的嵌入技术全面解析暗冰ཏོ4 小时前
《前端动画超详细教程：CSS、JS 动画原理、实战与性能优化》