JavaScript 实现虚拟滚动技术

xupengboo

已于 2024-09-04 14:33:27 修改

阅读量1.1k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript 前端开发语言

于 2024-09-04 14:32:45 首次发布

本文链接：https://blog.csdn.net/IT_Holmes/article/details/141893116

虚拟滚动

虚拟滚动（有时称为虚拟列表、虚拟滚动条）是 JavaScript 中的一种技术，旨在优化大数据量的列表渲染，尤其是当有成千上万的数据项时，直接渲染整个列表会导致性能问题。虚拟列表通过只渲染用户视口中可见的那一部分列表项，从而减少 DOM 元素的数量和内存占用，提高渲染性能。

使用场景：只渲染可视区域内的内容来优化大数据量渲染性能的技术。

JS 实现简单的虚拟滚动效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Virtual Scrolling Example</title>
    <style>
        #container {
     
     
            height: 300px;
            overflow-y: auto;
            position: relative