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

虚拟滚动列表如何实现？

news 2025/9/18 2:29:07

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();}

  1. scrollTop：
    scrollTop 是当前滚动条的位置，表示从容器顶部到滚动条当前位置的距离（以像素为单位）。

  2. itemHeight：
    itemHeight 是每个数据项的高度（以像素为单位）。假设每个数据项的高度是固定的，例如 50 像素。

  3. scrollTop / itemHeight：
    这个表达式计算当前滚动条位置对应的数据项索引。结果是一个浮点数，表示滚动条位置对应的数据项的大致位置。

  4. Math.floor(scrollTop / itemHeight)：
    使用 Math.floor 将浮点数向下取整，得到一个整数索引，表示当前滚动条位置对应的数据项的起始索引。

  5. Math.floor(scrollTop / itemHeight) - buffer：
    减去 buffer，确保在可视区域上方提前加载 buffer 个数据项。buffer 是一个缓冲区，表示在可视区域外提前加载的数据项数量。例如，buffer 设为 5，意味着在可视区域上方提前加载 5 个数据项。

  6. 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";

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

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

  3. 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 虚拟滚动列表&#xff0c;虚拟滚动的关键在于只渲染当前视口内可见的数据项&#xff0c;而不是一次性渲染所有数据项。这可以显著提高性能&#xff0c;尤其是在处理大量数据时。 以下是一个完整的虚拟滚动列表的示例代码&#xff1a; <!DOCTYPE htm…...

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

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

本系列文章导航&#xff1a;01_Linux基础操作CentOS7学习笔记-CSDN博客 文章目录 网络配置与管理&#xff1a;命令与工具指南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是一种新型的图像生成模型&#xff0c;它可以生成高质量的图像&#xff0c;同时还能有效地提取图像特征。该方法是通过将图像转换为一系列的二进制代码来工作&#xff0c;这些代码就像是图像的“压缩版”。在训练时会遮住一些代码&#xff0c;然后让模型学习如何根据剩下的…...

编程日记 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

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

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

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

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

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

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

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

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

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

【Dash】feffery_antd_components 按钮组件的应用

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

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

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

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

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

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

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

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

VSCode编译器改为中文

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

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

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

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

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

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

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

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

实现prometheus+grafana的监控部署

直接贴部署用的文件信息了 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项目中&#xff0c;确保定时任务只执行一次是一个常见的需求。这种需求可以通过多种方式来实现&#xff0c;以下是一些常见的方法&#xff0c;它们各具特点&#xff0c;可以根据项目的实际需求来选择最合适的方法。 1. 使用Scheduled注解并设置极大延迟 一种简单…...

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

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

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

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

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

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

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

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

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

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

生成文件夹 - python 实现

生成文件夹保存图片和文本等信息。 代码具体实现如下&#xff1a; #-*-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 提供的常用快捷键

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

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

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

编程新知 2025/8/12 16:28:43

Leetcode 3576. Transform Array to All Equal Elements

Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接&#xff1a;3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到&#xf…...

编程新知 2025/9/17 7:25:07

线程与协程

1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指&#xff1a;像函数调用/返回一样轻量地完成任务切换。 举例说明&#xff1a; 当你在程序中写一个函数调用&#xff1a; funcA() 然后 funcA 执行完后返回&…...

编程新知 2025/8/6 18:56:50

浅谈不同二分算法的查找情况

二分算法原理比较简单&#xff0c;但是实际的算法模板却有很多&#xff0c;这一切都源于二分查找问题中的复杂情况和二分算法的边界处理&#xff0c;以下是博主对一些二分算法查找的情况分析。 需要说明的是&#xff0c;以下二分算法都是基于有序序列为升序有序的情况&#xf…...

编程新知 2025/9/14 7:37:32

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

编程新知 2025/9/7 8:51:09

C++.OpenGL （20/64）混合（Blending）

混合（Blending） 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...

编程新知 2025/7/6 20:05:42

搭建DNS域名解析服务器(正向解析资源文件)

正向解析资源文件 1&#xff09;准备工作 服务端及客户端都关闭安全软件 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 2&#xff09;服务端安装软件&#xff1a;bind 1.配置yum源 [rootlocalhost ~]# cat /etc/yum.repos.d/base.repo [Base…...

编程新知 2025/9/5 14:31:01

MySQL 部分重点知识篇

一、数据库对象 1. 主键 定义 &#xff1a;主键是用于唯一标识表中每一行记录的字段或字段组合。它具有唯一性和非空性特点。 作用 &#xff1a;确保数据的完整性&#xff0c;便于数据的查询和管理。 示例 &#xff1a;在学生信息表中&#xff0c;学号可以作为主键&#xff…...

编程新知 2025/8/19 22:24:50

渗透实战PortSwigger靶场：lab13存储型DOM XSS详解

进来是需要留言的&#xff0c;先用做简单的 html 标签测试 发现面的</h1>不见了 数据包中找到了一个loadCommentsWithVulnerableEscapeHtml.js 他是把用户输入的<>进行 html 编码&#xff0c;输入的<>当成字符串处理回显到页面中&#xff0c;看来只是把用户输…...

编程新知 2025/9/2 16:50:58

算法—栈系列

一&#xff1a;删除字符串中的所有相邻重复项 class Solution { public:string removeDuplicates(string s) {stack<char> st;for(int i 0; i < s.size(); i){char target s[i];if(!st.empty() && target st.top())st.pop();elsest.push(s[i]);}string ret…...

编程新知 2025/9/17 20:46:11