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

JavaScript 实现虚拟滚动技术

虚拟滚动

虚拟滚动(有时称为 虚拟列表、虚拟滚动条)是 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;border: 1px solid #ccc;}.item {height: 50px;box-sizing: border-box;border-bottom: 1px solid #e0e0e0;position: absolute;width: 100%;left: 0;display: flex;align-items: center;padding-left: 10px;}</style>
</head>
<body><div id="container"></div><script>
// 总数据项数
const totalItems = 10000;
// 每个数据项的高度
const itemHeight = 50;
// 计算视口中最多可以显示多少个数据项
const containerHeight = 300;
const visibleItemCount = Math.ceil(containerHeight / itemHeight);// 获取容器元素
const container = document.getElementById('container');// 创建一个空白的填充容器,用于撑开滚动条
const spacer = document.createElement('div');
spacer.style.height = `${totalItems * itemHeight}px`;
container.appendChild(spacer);// 创建可见项的容器
const visibleItemsContainer = document.createElement('div');
container.appendChild(visibleItemsContainer);// 渲染可见项的函数
function renderVisibleItems(scrollTop) {const startIndex = Math.floor(scrollTop / itemHeight);const endIndex = Math.min(startIndex + visibleItemCount, totalItems);// 清空之前的可见项visibleItemsContainer.innerHTML = '';// 渲染当前视口中的数据项for (let i = startIndex; i < endIndex; i++) {const item = document.createElement('div');item.className = 'item';item.style.top = `${i * itemHeight}px`;item.textContent = `Item ${i + 1}`;visibleItemsContainer.appendChild(item);}
}// 初始化渲染
renderVisibleItems(0);// 添加滚动事件监听
container.addEventListener('scroll', () => {const scrollTop = container.scrollTop;renderVisibleItems(scrollTop);
});
</script>
</body>
</html>
  1. 根据高度等属性,计算出滚动条的滚动大小效果。

image-20240904140033136

  1. 根据 滚动监听和索引位置改变 ,来实现DOM元素切换。

image-20240904140326919

VueUse 虚拟滚动条 工具

VueUse 虚拟滚动条:https://vueuse.nodejs.cn/core/useVirtualList/#usevirtuallist

image-20240904135408561

根据官方案例来就行,使用起来很简单。

相关文章:

JavaScript 实现虚拟滚动技术

虚拟滚动 虚拟滚动&#xff08;有时称为 虚拟列表、虚拟滚动条&#xff09;是 JavaScript 中的一种技术&#xff0c;旨在优化大数据量的列表渲染&#xff0c;尤其是当有成千上万的数据项时&#xff0c;直接渲染整个列表会导致性能问题。虚拟列表通过只渲染用户视口中可见的那一…...

【重学 MySQL】十八、逻辑运算符的使用

【重学 MySQL】十八、逻辑运算符的使用 AND运算符OR运算符NOT运算符异或运算符使用 XOR 关键字使用 BIT_XOR() 函数注意事项 注意事项 在MySQL中&#xff0c;逻辑运算符是构建复杂查询语句的重要工具&#xff0c;它们用于处理布尔类型的数据&#xff0c;进行逻辑判断和组合条件…...

关于 QImage原始数据格式与cv::Mat原始数据进行手码数据转换 的解决方法

若该文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/141996117 长沙红胖子Qt&#xff08;长沙创微智科&#xff09;博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV…...

前端WebSocket客户端实现

// 创建WebSocket连接 var socket new WebSocket(ws://your-spring-boot-server-url/websocket-endpoint);// 连接打开时触发 socket.addEventListener(open, function (event) {socket.send(JSON.stringify({type: JOIN, room: general})); });// 监听从服务器来的消息 socke…...

读取realsense d455双目及imu

问题定义 实时读取realsense数据喂给slam系统 代码 /** rs_d455设备 */#include <librealsense2/rs.hpp> #include <iostream>#include "rs_common_device.h"// opencv #include <opencv2/opencv.hpp>class RsD455Device: public rsCmmonDevice…...

浮点的运算

浮点数表示&#xff1a; N 尾数 * 基数指数 1.25 X 106 尾数一般用补码&#xff0c;指数一般用移码 在IEEE745中尾数可以是原码。 尾数可以表示数值的有效精度&#xff0c;位数越多精度越高 阶码的位数决定数的表示范围&#xff0c;位数越多&#xff0c;范围越大 对阶时&…...

对随机游走问题的分析特定行为模式的建模

从一段随机游走的数据中寻找特定的行为模式&#xff0c;这种问题涉及 序列模式识别 或 序列分析。处理这种问题的算法选择取决于你要找的模式的具体性质和复杂性。以下是几种可能的算法&#xff1a; 隐马尔可夫模型&#xff08;HMM&#xff09; 隐马尔可夫模型特别适合处理随…...

JVM面试(七)G1垃圾收集器剖析

概述 上一章我们说了&#xff0c;G1收集器&#xff0c;它属于里程碑式的发展&#xff0c;开创了面向局部收集垃圾的概念。专门针对多核处理器以及大内存的机器。在JDK9中&#xff0c;更是呗指定为官方的GC收集器。满足高吞吐的通知满足GC的STW停顿时间尽可能的短。 虽然现在我…...

php转职golang第一期

入局golang 基础语法&#xff1a;学习 Go 语言的基本语法、数据类型、流程控制等。 数据结构与算法&#xff1a;掌握常用的数据结构和算法。 Web 开发基础&#xff1a;了解 HTTP 协议、Web 开发的基本概念。 Gin 框架或其他 Web 框架&#xff1a;深入学习使用一种 Go 的 Web…...

java后端服务监控与告警:Prometheus与Grafana集成

Java后端服务监控与告警&#xff1a;Prometheus与Grafana集成 大家好&#xff0c;我是微赚淘客返利系统3.0的小编&#xff0c;是个冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 在现代的微服务架构中&#xff0c;监控和告警是确保服务稳定性的关键组成部分。Pr…...

【系统架构设计师】工厂方法设计模式

工厂方法(Factory Method)模式是一种创建型设计模式,它定义了一个用于创建对象的接口,但让子类决定要实例化的类是哪一个。工厂方法让类的实例化延迟到子类中进行。 工厂方法模式的主要角色 产品(Product):定义工厂的创建对象的接口。具体产品(Concrete Product):实…...

怎样解决OpenEuler下载sdl2失败

OpenEuler 下载 sdl2失败 解决办法(使用wget中git上下载) wget https://github.com/libsdl-org/SDL/releases/download/release-2.30.6/SDL2-2.30.6.tar.gz使用yum下载&#xff0c;下载的最后说找不到这样的库(no match)使用 apt-get&#xff0c;说找不到apt-get使用curl冲gi…...

基于Python的自然语言处理系列(2):Word2Vec(负采样)

在本系列的第二篇文章中&#xff0c;我们将继续探讨Word2Vec模型&#xff0c;这次重点介绍负采样&#xff08;Negative Sampling&#xff09;技术。负采样是一种优化Skip-gram模型训练效率的技术&#xff0c;它能在大规模语料库中显著减少计算复杂度。接下来&#xff0c;我们将…...

每日一题|牛客竞赛|四舍五入|字符串+贪心+模拟

每日一题|四舍五入 四舍五入 心有猛虎&#xff0c;细嗅蔷薇。你好朋友&#xff0c;这里是锅巴的C\C学习笔记&#xff0c;常言道&#xff0c;不积跬步无以至千里&#xff0c;希望有朝一日我们积累的滴水可以击穿顽石。 四舍五入 题目&#xff1a; 牛牛发明了一种新的四舍五…...

大数据之Flink(六)

17、Flink CEP 17.1、概念 17.1.1、CEP CEP是“复杂事件处理&#xff08;Complex Event Processing&#xff09;”的缩写&#xff1b;而 Flink CEP&#xff0c;就是 Flink 实现的一个用于复杂事件处理的库&#xff08;library&#xff09;。 总结起来&#xff0c;复杂事件处…...

设计模式学习[5]---装饰模式

文章目录 前言1. 原理阐述2. 举例2.1 人装饰方案一2.2 人装饰方案二2.3 人装饰方案三 总结 前言 近期在给一个已有的功能拓展新功能时&#xff0c;基于原有的设计类图进行讨论。其中涉及到了装饰模式&#xff0c;因为书本很早已经看过一遍&#xff0c;所以谈及到这个名词的时候…...

3.C_数据结构_栈

概述 什么是栈&#xff1a; 栈又称堆栈&#xff0c;是限定在一段进行插入和删除操作的线性表。具有后进先出(LIFO)的特点。 相关名词&#xff1a; 栈顶&#xff1a;允许操作的一端栈底&#xff1a;不允许操作的一端空栈&#xff1a;没有元素的栈 栈的作用&#xff1a; 可…...

Debian11安装DolphinScheduler

安装地址 前置准备工作 JDK安装 下载JDK (1.8)&#xff0c;安装并配置 JAVA_HOME 环境变量&#xff0c;并将其下的 bin 目录追加到 PATH 环境变量中。如果你的环境中已存在&#xff0c;可以跳过这步 二进制包安装DolphinScheduler 依赖 apt-get install psmisc 二进制安…...

C语言深度剖析--不定期更新的第五弹

const关键字 来看一段代码&#xff1a; #include <stdio.h> int main() {int a 10;a 20;printf("%d\n", a);return 0; }运行结果如下&#xff1a; 接下来我们在上面的代码做小小的修改&#xff1a; #include <stdio.h> int main() {const int a 1…...

python之事务

事务&#xff08;Transaction&#xff09;是数据库管理系统&#xff08;DBMS&#xff09;中的一个重要概念&#xff0c;用于确保一组数据库操作要么全部成功&#xff0c;要么全部失败&#xff0c;从而保证数据的一致性和完整性。 事务ACID 特性 事务具有以下四个特性&#xf…...

CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型

CVPR 2025 | MIMO&#xff1a;支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题&#xff1a;MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者&#xff1a;Yanyuan Chen, Dexuan Xu, Yu Hu…...

剑指offer20_链表中环的入口节点

链表中环的入口节点 给定一个链表&#xff0c;若其中包含环&#xff0c;则输出环的入口节点。 若其中不包含环&#xff0c;则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

如何在看板中有效管理突发紧急任务

在看板中有效管理突发紧急任务需要&#xff1a;设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP&#xff08;Work-in-Progress&#xff09;弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中&#xff0c;设立专门的紧急任务通道尤为重要&#xff0c;这能…...

Neo4j 集群管理:原理、技术与最佳实践深度解析

Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档,本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石,用于构建高可用、可扩展且一致的图数据库服务…...

AI,如何重构理解、匹配与决策?

AI 时代&#xff0c;我们如何理解消费&#xff1f; 作者&#xff5c;王彬 封面&#xff5c;Unplash 人们通过信息理解世界。 曾几何时&#xff0c;PC 与移动互联网重塑了人们的购物路径&#xff1a;信息变得唾手可得&#xff0c;商品决策变得高度依赖内容。 但 AI 时代的来…...

【Go语言基础【13】】函数、闭包、方法

文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数&#xff08;函数作为参数、返回值&#xff09; 三、匿名函数与闭包1. 匿名函数&#xff08;Lambda函…...

深度学习之模型压缩三驾马车:模型剪枝、模型量化、知识蒸馏

一、引言 在深度学习中&#xff0c;我们训练出的神经网络往往非常庞大&#xff08;比如像 ResNet、YOLOv8、Vision Transformer&#xff09;&#xff0c;虽然精度很高&#xff0c;但“太重”了&#xff0c;运行起来很慢&#xff0c;占用内存大&#xff0c;不适合部署到手机、摄…...

写一个shell脚本,把局域网内,把能ping通的IP和不能ping通的IP分类,并保存到两个文本文件里

写一个shell脚本&#xff0c;把局域网内&#xff0c;把能ping通的IP和不能ping通的IP分类&#xff0c;并保存到两个文本文件里 脚本1 #!/bin/bash #定义变量 ip10.1.1 #循环去ping主机的IP for ((i1;i<10;i)) doping -c1 $ip.$i &>/dev/null[ $? -eq 0 ] &&am…...

2025-05-08-deepseek本地化部署

title: 2025-05-08-deepseek 本地化部署 tags: 深度学习 程序开发 2025-05-08-deepseek 本地化部署 参考博客 本地部署 DeepSeek&#xff1a;小白也能轻松搞定&#xff01; 如何给本地部署的 DeepSeek 投喂数据&#xff0c;让他更懂你 [实验目的]&#xff1a;理解系统架构与原…...

背包问题双雄:01 背包与完全背包详解(Java 实现)

一、背包问题概述 背包问题是动态规划领域的经典问题&#xff0c;其核心在于如何在有限容量的背包中选择物品&#xff0c;使得总价值最大化。根据物品选择规则的不同&#xff0c;主要分为两类&#xff1a; 01 背包&#xff1a;每件物品最多选 1 次&#xff08;选或不选&#…...