当前位置：首页 > news >正文

虚拟滚动列表如何实现？

news 文章来源：https://blog.csdn.net/wbskb/article/details/143122661 2025/5/10 11:56:05

highlight: a11y-dark

虚拟滚动列表，虚拟滚动的关键在于只渲染当前视口内可见的数据项，而不是一次性渲染所有数据项。这可以显著提高性能，尤其是在处理大量数据时。

以下是一个完整的虚拟滚动列表的示例代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Virtual Scrolling</title><style>#container {width: 500px;height: 700px;margin: 30px;overflow: auto;position: relative;border: 1px solid #ccc;}.item {position: absolute;width: 100%;background-color: #bfc;border-radius: 10px;margin: 2px 0;padding: 10px;box-sizing: border-box;}</style></head><body><div id="container"></div><script>const container = document.getElementById("container");const itemHeight = 50;const containerHeight = 700;const buffer = 5;let data = [];let visibleData = [];let startIndex = 0;function loopFun(num) {data = Array.from({ length: num }, (_, index) => index);handleScroll();}function handleScroll() {const scrollTop = container.scrollTop;const visibleStart = Math.max(0, Math.floor(scrollTop / itemHeight) - buffer);const visibleEnd = Math.min(data.length,visibleStart + Math.ceil(containerHeight / itemHeight) + buffer * 2);startIndex = visibleStart;visibleData = data.slice(visibleStart, visibleEnd);renderVisibleData();}function renderVisibleData() {container.innerHTML = "";visibleData.forEach((item, index) => {const div = document.createElement("div");div.className = "item";div.style.top = (startIndex + index) * itemHeight + "px";div.textContent = `数据-${item}`;container.appendChild(div);});}function throttle(func, limit) {let inThrottle;return function () {const args = arguments;const context = this;if (!inThrottle) {func.apply(context, args);inThrottle = true;setTimeout(() => (inThrottle = false), limit);}};}loopFun(1000);const throttledHandleScroll = throttle(handleScroll, 100);container.addEventListener("scroll", throttledHandleScroll);window.addEventListener("beforeunload", () => {container.removeEventListener("scroll", throttledHandleScroll);});</script></body>
</html>

上面一大串代码，看起来比较难看，在下边我会拆开了一点点来说明。先来看一下在页面上的展示效果，如下：

在这里插入图片描述

对比两张效果图可以看到，不论怎么滚动，页面实际上展示的永远是 23 条数据。

声明的变量：

const container = document.getElementById("container"); // 获取元素
const itemHeight = 50; // 每个数据项的高度
const containerHeight = 700; // 容器的高度
const buffer = 5; // 缓冲区，提前加载的数据项数量let data = []; // 获取元素
let visibleData = []; // 存储当前可视区域的数据项
let startIndex = 0; // 当前可视区域的起始索引

loopFun() 函数的作用：

// 拿到 num 条数据的索引，生成新数组。
function loopFun(num) {data = Array.from({ length: num }, (_, index) => index);handleScroll();
}

Array.from() 静态方法从可迭代或类数组对象创建一个新的浅拷贝的数组实例。

handleScroll() 函数的作用：

function handleScroll() {/** scrollTop 用于获取或设置一个元素的垂直滚动距离 */const scrollTop = container.scrollTop;/*** Math.max() 静态方法返回作为输入参数给出的数字中的最大值* Math.floor() 静态方法始终向下舍入并返回小于或等于给定数字的最大整数** scrollTop / itemHeight 得到当前滚动条所处数据位置* buffer 意味着在可视区域上方和下方各提前加载5个数据项*/const visibleStart = Math.max(0, Math.floor(scrollTop / itemHeight) - buffer);/*** Math.min() 静态方法返回作为输入参数给出的数字中的最小者* Math.ceil() 静态方法始终向上舍入并返回大于或等于给定数字的最小整数*/const visibleEnd = Math.min(data.length,visibleStart + Math.ceil(containerHeight / itemHeight) + buffer * 2);startIndex = visibleStart;visibleData = data.slice(visibleStart, visibleEnd);renderVisibleData();}

scrollTop：
scrollTop 是当前滚动条的位置，表示从容器顶部到滚动条当前位置的距离（以像素为单位）。
itemHeight：
itemHeight 是每个数据项的高度（以像素为单位）。假设每个数据项的高度是固定的，例如 50 像素。
scrollTop / itemHeight：
这个表达式计算当前滚动条位置对应的数据项索引。结果是一个浮点数，表示滚动条位置对应的数据项的大致位置。
Math.floor(scrollTop / itemHeight)：
使用 Math.floor 将浮点数向下取整，得到一个整数索引，表示当前滚动条位置对应的数据项的起始索引。
Math.floor(scrollTop / itemHeight) - buffer：
减去 buffer，确保在可视区域上方提前加载 buffer 个数据项。buffer 是一个缓冲区，表示在可视区域外提前加载的数据项数量。例如，buffer 设为 5，意味着在可视区域上方提前加载 5 个数据项。
Math.max(0, …)：
使用 Math.max 确保 visibleStart 不小于 0，防止负索引。如果 Math.floor(scrollTop / itemHeight) - buffer 小于 0，则 visibleStart 会被设置为 0。

renderVisibleData() 函数的作用：

// 处理标签结构及文本的展示
function renderVisibleData() {container.innerHTML = "";visibleData.forEach((item, index) => {const div = document.createElement("div");div.className = "item";div.style.top = (startIndex + index) * itemHeight + "px";div.textContent = `数据-${item}`;container.appendChild(div);});
}

相当于生成了一个 div 标签，加上 class 属性 item

<div class="item">数据-1</div>

然后对这个标签进行循环展示。

{visibleData.map((item, index) => (<div class="item" key={item}>数据-{item}</div>));
}

这一行代码，可以详细说一说：

div.style.top = (startIndex + index) * itemHeight + "px";

div.style.top
div.style：这是 DOM 元素的 style 属性，它允许你直接访问和修改元素的内联样式。
top：这是 style 对象的一个属性，用于设置元素的 top CSS 属性。top 属性定义了元素相对于其父容器的顶部边缘的距离。

(startIndex + index) * itemHeight
startIndex：这是当前可视区域的起始索引，表示第一个可见数据项在整个数据数组中的位置。
index：这是当前数据项在其可视区域内的索引。例如，如果 visibleData 包含 10 个数据项，index 会从 0 到 9。

itemHeight：这是每个数据项的高度（以像素为单位）。

准确的来说这是用来计算数据项的垂直位置的。

startIndex + index：计算当前数据项在整个数据数组中的实际索引。startIndex 是当前可视区域的起始索引，index 是当前数据项在其可视区域内的索引。
(startIndex + index) \* itemHeight：将实际索引乘以每个数据项的高度，得到当前数据项的垂直位置（以像素为单位）。
设置 top 属性： div.style.top = (startIndex + index) * itemHeight + ‘px’：将计算得到的垂直位置设置为 div 元素的 top 属性值。这样，每个数据项都会根据其在数据数组中的位置被正确地定位在容器中。

示例:

startIndex = 10;
index = 2;
itemHeight = 50;

计算过程：

startIndex + index = 10 + 2 = 12(startIndex + index) _ itemHeight = 12 _ 50 = 600div.style.top = 600 + 'px' = 600px

因此，这个数据项的 top 属性会被设置为 600px，表示它距离容器顶部 600 像素。

作用：通过这种方式，你可以确保每个数据项在容器中的位置是正确的。即使容器滚动，每个数据项也会根据其在数据数组中的位置被正确地定位，从而实现虚拟滚动的效果。

throttle() 函数的作用：

// 节流处理
function throttle(func, limit) {let inThrottle;return function () {const args = arguments;const context = this;if (!inThrottle) {func.apply(context, args);inThrottle = true;setTimeout(() => (inThrottle = false), limit);}};
}

throttle 函数是一种常用的节流技术，用于限制函数的调用频率。它在处理高频事件（如滚动、窗口调整大小等）时非常有用，可以显著提高性能并减少不必要的计算。

示例:

func：需要节流的函数。
limit：节流的时间间隔（以毫秒为单位），表示在多少毫秒内只能执行一次 func。

// 100 毫秒后执行函数 handleScroll
throttle(handleScroll, 100);

底部函数调用：

loopFun(1000);

调用 loopFun 函数，生成 1000 个数据项。

const throttledHandleScroll = throttle(handleScroll, 100);

使用 throttle 函数对 handleScroll 进行节流处理，确保 handleScroll 每 100 毫秒最多执行一次。

container.addEventListener("scroll", throttledHandleScroll);

向容器元素添加滚动事件监听器，当容器滚动时，throttledHandleScroll 函数会被调用。

window.addEventListener("beforeunload", () => {container.removeEventListener("scroll", throttledHandleScroll);
});

window\.addEventListener('beforeunload', ...)：在窗口即将卸载时（例如用户关闭页面或导航到其他页面）触发的事件。
container.removeEventListener('scroll', throttledHandleScroll)：在页面卸载前移除滚动事件监听器，避免内存泄漏。

虚拟滚动列表如何实现？

highlight: a11y-dark 虚拟滚动列表，虚拟滚动的关键在于只渲染当前视口内可见的数据项，而不是一次性渲染所有数据项。这可以显著提高性能，尤其是在处理大量数据时。以下是一个完整的虚拟滚动列表的示例代码： <!DOCTYPE htm…...

编程日记 2024/10/22 9:03:37

07_Linux网络配置与管理：命令与工具指南

本系列文章导航：01_Linux基础操作CentOS7学习笔记-CSDN博客文章目录网络配置与管理：命令与工具指南1. ping命令2. ifconfig命令3. ip命令4. route命令5. ip route命令6. nslookup命令7. nmcli命令8. nmtui命令9. RHEL7修改网卡名1. 修改网络(会话)配置…...

编程日记 2024/10/22 9:00:32

首个统一生成和判别任务的条件生成模型框架BiGR：专注于增强生成和表示能力，可执行视觉生成、辨别、编辑等任务

BiGR是一种新型的图像生成模型，它可以生成高质量的图像，同时还能有效地提取图像特征。该方法是通过将图像转换为一系列的二进制代码来工作，这些代码就像是图像的“压缩版”。在训练时会遮住一些代码，然后让模型学习如何根据剩下的…...

编程日记 2024/10/22 8:56:28

【Java知识】Java进阶-服务发现机制SPI

文章目录 SPI概述SPI 工作原理 ServiceLoader代码展示简化的 ServiceLoader 类关键点解释使用示例1. 定义服务接口2. 实现服务提供者3. 配置文件4. 加载服务提供者总结 SPI使用场景1. 数据库驱动2. 日志框架3. 图像处理4. 加密算法5. 插件系统6. 缓存机制示例代码1. 定义服务接…...

编程日记 2024/10/22 8:54:25

多模态技术的协同表现：从文本生成、语音合成到口型同步综合测评

本文是针对多模态对话系统核心技术栈的使用效果和网络测评整理。测评内容基于用户体验，侧重于从使用者角度出发，讨论实际操作中的体验感受，如技术的易用性、输出效果如文本的连贯性、语音的自然度、口型同步的准确性等。不涉及具体算法架构…...

编程日记 2024/10/22 8:53:24

Java最全面试题-＞Java主流框架-＞Srping面试题

Spring面试题下边是我自己整理的面试题，基本已经很全面了，想要的可以私信我，我会不定期去更新思维导图哪里不会点哪里谈谈你对 Spring 的理解？ Spring 是一个开源框架，为简化企业级应用开发而生。Spring 可以是使简单的 JavaBean 实现以前只有 EJB 才能实现的功能。…...

编程日记 2024/10/22 8:51:22

参编国家标准需要注意的事项有哪些？

1. 项目相关性： • 选择与自身企业产品、业务或专业领域紧密相关的国家标准进行参编。这样不仅能确保企业在标准制定过程中发挥自身的优势和专长，使参编工作更有实际意义和价值，也有利于企业将标准更好地应用于自身的生产经营活动&#xff0c…...

编程日记 2024/10/22 8:50:21

【Dash】feffery_antd_components 按钮组件的应用

一、feffery_antd_componenet 中的 AntdFloatButton 和 AntdFloatButtonGroup AntdFloatButton 和 AntdFloatButtonGroup 是两个用于创建悬浮按钮和悬浮按钮组的组件。 AntdFloatButton 是单个悬浮按钮组件，它提供了多种属性来定义按钮的外观及行为。AntdFloatBut…...

编程日记 2024/10/22 8:49:18

01 springboot-整合日志(logback-config.xml)

logback-config.xml 是一个用于配置 Logback 日志框架的 XML 文件，通常位于项目的 classpath 下的根目录或者 src/main/resources 目录下。 Logback 提供了丰富的配置选项，可以满足各种不同的日志需求。需要根据具体情况进行配置。项目创建&#xff0…...

编程日记 2024/10/22 8:47:15

Java最全面试题-＞计算机基础面试题-＞计算机网络面试题

计算机网络下边是我自己整理的面试题，基本已经很全面了，想要的可以私信我，我会不定期去更新思维导图哪里不会点哪里 1.说一下TCP/IP四层模型 TCP/IP协议是美国国防部高级计划研究局为实现ARPANET互联网而开发的。网络接口层&#xff…...

编程日记 2024/10/22 8:41:09

VSCode编译器改为中文

1. 通过快捷键设置中文打开命令面板：按住键盘上的CtrlShiftP组合键，打开命令面板。输入并设置语言：在命令面板中输入Configure Display Language。点击Configure Display Language选项。在弹出的语言选择列表中，选择zh-cn…...

编程日记 2024/10/22 8:39:04

前端开发设计模式——状态模式

目录一、状态模式的定义和特点二、状态模式的结构与原理 1.结构： 2.原理： 三、状态模式的实现方式四、状态模式的使用场景 1.按钮的不同状态： 2.页面加载状态： 3.用户登录状态： 五、状态模式的优点 1.提…...

编程日记 2024/10/22 8:35:01

特种作业操作烟花爆竹试题分享

1.（单选题）职业卫生研究的是人类从事各种职业劳动过程中的（ ）。 A.健康问题 B.环境问题 C.卫生问题答案:C 2.（单选题）安全生产事关人民群众的（ ）安全，事关改革发展和…...

编程日记 2024/10/22 8:34:00

直接贴部署用的文件信息了 kubectl label node xxx monitoringtrue 创建命名空间 kubectl create ns monitoring 部署operator kubectl apply -f operator-rbac.yml kubectl apply -f operator-dp.yml kubectl apply -f operator-crd.yml # 定义node-export kubectl app…...

编程日记 2024/10/22 8:32:58

确保Spring Boot定时任务只执行一次方案

在Spring Boot项目中，确保定时任务只执行一次是一个常见的需求。这种需求可以通过多种方式来实现，以下是一些常见的方法，它们各具特点，可以根据项目的实际需求来选择最合适的方法。 1. 使用Scheduled注解并设置极大延迟一种简单…...

编程日记 2024/10/22 8:29:56

【Python数据可视化】利用Matplotlib绘制美丽图表！

【Python数据可视化】利用Matplotlib绘制美丽图表！ 数据可视化是数据分析过程中的重要步骤，它能直观地展示数据的趋势、分布和相关性，帮助我们做出明智的决策。在 Python 中，Matplotlib 是最常用的可视化库之一，它功能…...

编程日记 2024/10/22 8:26:53

【最新通知】2024年Cisco思科认证CCNA详解

CCNA现在涵盖安全性、自动化和可编程性。该计划拥有一项涵盖IT职业基础知识的认证，包括一门考试和一门培训课程，助您做好准备。 CCNA培训课程和考试最近面向最新技术和工作岗位进行了重新调整，为您提供了向任何方向发展事业所需的基础。CCNA认…...

编程日记 2024/10/22 8:25:52

监控内容、监控指标、监控工具大科普

在现代信息技术领域，监控技术扮演着至关重要的角色。它帮助我们实时了解系统、网络、应用以及环境的状态，确保它们的安全、稳定和高效运行。以下是对监控内容、监控指标和监控工具的详细科普。一、监控内容监控内容是指监控系统所关注和记录的具体信…...

编程日记 2024/10/22 8:24:51

生成文件夹 - python 实现

生成文件夹保存图片和文本等信息。代码具体实现如下： #-*-coding:utf-8-*- # date:2021-04-13 # Author: DataBall - XIAN # Function: 生成文件夹import os if __name__ "__main__":path "./dataset"if not os.path.exists(path): # 如果…...

编程日记 2024/10/22 8:23:50

快速了解学会python基础语言及IDLE 提供的常用快捷键

😀前言本篇博文是关于python的基础语言介绍及IDLE 提供的常用快捷键，希望你能够喜欢 🏠个人主页：晨犀主页 🧑个人简介：大家好，我是晨犀，希望我的文章可以帮助到大家，您的…...

编程日记 2024/10/22 8:21:46

【python】OpenCV—Sort the Point Set from Top Left to Bottom Right

文章目录 1、功能描述2、代码实现3、效果展示4、更多例子5、参考 1、功能描述给出一张图片，里面含有各种图形，取各种图形的中心点，从左到右从上到下排序例如 2、代码实现 import cv2 import numpy as npdef process_img(img):img_gray c…...

编程日记 2024/10/22 8:18:43

LeetCode 1493.删掉一个元素以后全为1的最长子数组

题目： 给你一个二进制数组 nums ，你需要从中删掉一个元素。请你在删掉元素的结果数组中，返回最长的且只包含 1 的非空子数组的长度。如果不存在这样的子数组，请返回 0 。思路：不定长滑动窗口，将问题…...

编程日记 2024/10/22 8:17:40

php常用设计模式之工厂模式

引言在日常开发中，我们一些业务场景需要用到发送短信通知。然而实际情况考虑到不同厂商之间的价格、实效性、可能会出现的情况等我们的业务场景往往会接入多个短信厂商来保证我们业务的正常运行，而不同的短信厂商（如阿里云短信、腾讯云短信…...

编程日记 2024/10/22 8:16:39

通用软件版本标识

软件版本标识：了解不同的版本类型在软件开发和发布过程中，版本号和标识扮演着重要的角色。它们不仅帮助开发者追踪软件的演变，还让用户了解软件的稳定性和功能。以下是一些常见的软件版本标识，以及它们的含义和用途。 Alpha&am…...

编程日记 2024/10/22 8:15:36

（计算机毕设）基于SpringBoot的就业平台开题报告

一、立题依据(国内外研究进展或选题背景、研究意义等) 国内外研究进展或选题背景在全球化的大背景下，就业问题一直是各国政府和社会各界关注的焦点。随着互联网技术的普及和发展，网络招聘已成为求职者和企业招聘的主要渠道。据相关数据显示&#xff0…...

编程日记 2024/10/22 8:09:31

STM32G4系列MCU的ADC模块标定方法和采样时间

目录概述 1 ADC模块标定 1.1 功能介绍 1.2 软件程序校准ADC 1.2.1 标定步骤 1.2.2 标定时序框图 1.3 软件程序重新注入校准因子到ADC 1.3.1 标定步骤 1.3.2 更新ADC校准因子 1.4 用单个ADC转换单端和差分模拟输入 1.4.1 标定流程 1.4.2 混合单端和差分通道 2 通道…...

编程日记 2024/10/22 8:08:30

NVIDIA Jetson支持的神经网络加速的量化平台

NVIDIA Jetson支持的神经网络加速的量化工具、技术 NVIDIA Jetson 是专为边缘计算和嵌入式系统设计的高性能计算平台，它支持多种深度学习模型的部署和推理。对于神经网络加速的量化平台，Jetson 支持以下技术和工具： TensorRT：Ten…...

编程日记 2024/10/22 8:07:29

MySQL 免密登录的几种配置方式

文章目录 MySQL 免密登录的几种配置方式使用操作系统用户实现免密登录具体步骤：Step 1: 修改 MySQL 配置文件Step 2: 重启 MySQL 服务Step 3: 使用系统用户登录 MySQL优点：缺点： 使用 mysql_config_editor 配置免密文件具体步骤：S…...

编程日记 2024/10/22 8:06:28

html全局属性、框架标签

常用的全局属性： 属性名含义id 给标签指定唯一标识，注意：id是不能重复的。作用：可以让label标签与表单控件相关联；也可以与css、JavaScript配合使用。注意：不能再以下HTML元素中使用：<hea…...

编程日记 2024/10/22 8:05:27

ARL 灯塔 | CentOS7 — ARL 灯塔搭建流程（Docker）

关注这个工具的其它相关内容：自动化信息收集工具 —— ARL 灯塔使用手册 - CSDN 博客灯塔，全称：ARL 资产侦察灯塔系统，有着域名资产发现和整理、IP/IP 段资产整理、端口扫描和服务识别、WEB 站点指纹识别、资产分组管理和搜索等等…...

编程日记 2024/10/22 8:04:26

虚拟滚动列表如何实现？

highlight: a11y-dark

声明的变量：

loopFun() 函数的作用：

handleScroll() 函数的作用：

renderVisibleData() 函数的作用：

throttle() 函数的作用：

底部函数调用：

相关文章：

虚拟滚动列表如何实现？

07_Linux网络配置与管理：命令与工具指南

首个统一生成和判别任务的条件生成模型框架BiGR：专注于增强生成和表示能力，可执行视觉生成、辨别、编辑等任务

【Java知识】Java进阶-服务发现机制SPI

多模态技术的协同表现：从文本生成、语音合成到口型同步综合测评

Java最全面试题-＞Java主流框架-＞Srping面试题

参编国家标准需要注意的事项有哪些？

【Dash】feffery_antd_components 按钮组件的应用

01 springboot-整合日志(logback-config.xml)

Java最全面试题-＞计算机基础面试题-＞计算机网络面试题

VSCode编译器改为中文

前端开发设计模式——状态模式

特种作业操作烟花爆竹试题分享

实现prometheus+grafana的监控部署

确保Spring Boot定时任务只执行一次方案

【Python数据可视化】利用Matplotlib绘制美丽图表！

【最新通知】2024年Cisco思科认证CCNA详解

监控内容、监控指标、监控工具大科普

生成文件夹 - python 实现

快速了解学会python基础语言及IDLE 提供的常用快捷键

【python】OpenCV—Sort the Point Set from Top Left to Bottom Right

LeetCode 1493.删掉一个元素以后全为1的最长子数组

php常用设计模式之工厂模式

通用软件版本标识

（计算机毕设）基于SpringBoot的就业平台开题报告

STM32G4系列MCU的ADC模块标定方法和采样时间

NVIDIA Jetson支持的神经网络加速的量化平台

MySQL 免密登录的几种配置方式

html全局属性、框架标签

ARL 灯塔 | CentOS7 — ARL 灯塔搭建流程（Docker）