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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/416855.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【SQL】删除表中重复数据的方法

很久之前我写入一张sql的数据表&#xff0c;它里面有很多重复的内容。然后我想只保留一条原始数据&#xff1a; 例如上面的时间&#xff0c;出现了很多重复值。 我最初用的是这种方法&#xff1a; SELECT * FROM table_name WHERE primary_key IN (SELECT max(primary_key)F…

C++设计模式——Chain of Responsibility职责链模式

一&#xff0c;职责链模式的定义 职责链模式&#xff0c;又被称为责任链模式&#xff0c;是一种行为型设计模式&#xff0c;它让多个对象依次处理收到的请求&#xff0c;直到处理完成为止。 职责链模式需要使用多个对象&#xff0c;其中的每个对象要么处理请求&#xff0c;要…

数据结构——归并排序

目录 引言 归并排序 1.算法思想 2.算法步骤 3.代码实现 4.复杂度分析 5.算法优化 (1)区间优化 (2)判断区间是否有序 6.非递归实现 7.应用场景 结束语 引言 在学习完 数据结构——快速排序 后&#xff0c;我们接着学习一种高效的排序方法——归并排序 求点赞收藏关…

stm32之外部flash下载算法

文章目录 下载算法下载到芯片的核心思想算法程序中擦除操作执行流程擦除操作大致流程&#xff1a;算法程序中编程操作执行流程算法程序中校验操作执行流程 创建MDK下载算法通用流程第1步&#xff0c;使用MDK提供好的程序模板第2步&#xff0c;修改工程名第3步&#xff0c;修改使…

值得听歌入手的开放式耳机推荐?分享四款开放式蓝牙耳机

作为网易云十级的耳机重度患者来说&#xff0c;我觉得值得听歌入手的开放式耳机还得是挂耳式的开放式耳机。 因为挂耳式的开放式耳机拥有着不错的佩戴体验&#xff0c;挂耳式的设计还能够牢牢贴合耳廓&#xff0c;而且不用入耳&#xff0c;所以能够保持耳道空气流通&#xff0…

【软件测试】软件测试-----什么是Bug?Bug是如何分级的?Bug的生命周期是怎样的?如何描述一个Bug?

博客目录 一.软件测试的生命周期二.BUG的定义和级别2.1 bug的概念.2.2 如何描述一个bug.2.3bug的级别2.3.1 bug分级的意义.2.3.2 bug的四种级别. 三.BUG的生命周期.四.当与开发人员发生冲突该如何处理(高频面试)五.总结 一.软件测试的生命周期 软件测试贯穿于软件的整个生命周…

出现 TypeError: Cannot read properties of undefined (reading ‘getUserMedia‘) 解决方法

目录 1. 问题所示2. 原理分析3. 解决方法1. 问题所示 调用摄像头的时候出现如下所示: Uncauht (in promise) TypeError: Cannot read properties of undefined (reading getUserMedia)截图如下: 2. 原理分析 TypeError: Cannot read properties of undefined (reading ‘…

NSS题目练习

[SWPUCTF 2022 新生赛]js_sign 打开后先随便填入&#xff0c;点击check&#xff0c;发现出现弹窗&#xff0c;并且尝试抓包抓不到&#xff0c;说明是js前端 查看源码找到js文件 补充&#xff1a; ‌‌ btoa函数是‌JavaScript中的一个全局函数&#xff0c;用于将二进制字符串…

【分享】Excel表格设置“打开密码”的两种方法

在工作中&#xff0c;Excel文件通常包含敏感数据&#xff0c;出于安全性考虑&#xff0c;给文件设置打开密码是非常有效的方式。接下来&#xff0c;小编给大家介绍两种方法&#xff0c;帮助你轻松为Excel文件设置密码。 方法一&#xff1a;在Excel表里设置“打开密码” 这是Ex…

基于yolov8的水面垃圾水面漂浮物检测系统python源码+onnx模型+评估指标曲线+精美GUI界面

【算法介绍】 基于YOLOv8的水面垃圾与漂浮物检测系统是一种高效、智能的监测解决方案。该系统利用YOLOv8这一前沿的深度学习模型&#xff0c;结合智能视频分析技术&#xff0c;对河道、湖泊等水面的垃圾漂浮物进行实时监测与识别。 YOLOv8作为YOLO系列的最新迭代&#xff0c;…

828华为云征文|华为云Flexus云服务器X实例部署Cockpit服务

828华为云征文&#xff5c;华为云Flexus云服务器X实例部署Cockpit笔记工具 前言一、Flexus云服务器X实例介绍1.1 Flexus云服务器X实例简介1.2 Flexus云服务器X实例特点1.3 Flexus云服务器X实例使用场景 二、Cockpit介绍2.1 Cockpit简介2.2 Cockpit特点 三、本次实践介绍3.1 本次…

录屏软件电脑,精选5款录屏神器推荐

嘿&#xff0c;朋友们&#xff01;想象一下&#xff0c;你正在与好友分享你最新的游戏成就&#xff0c;或是与同事展示你的最新项目进展&#xff0c;但却发现文字描述无法完美呈现你的精彩瞬间。别担心&#xff0c;在这个数字化的时代&#xff0c;我们有着无数种方式记录和分享…

计算机网络(一) —— 网络基础入门

目录 一&#xff0c;关于网络 二&#xff0c;协议 2.1 协议是什么&#xff0c;有什么用&#xff1f; 2.2 协议标准谁定的&#xff1f; 2.3 协议分层 2.4 OSI 七层模型 2.5 TCP/IP 四层模型 三&#xff0c;网络传输基本流程 3.1 局域网中两台主机通信* 3.2 报文的封装与…

Hadoop运行jps没有datanode节点【已解决】

1 原因&#xff1a; 格式化NameNode后&#xff0c;如果DataNode的clusterID与新的NameNode的clusterID不匹配&#xff0c;DataNode将无法加入集群&#xff0c;导致HDFS无法正常提供服务。 2 解决方式&#xff1a; 将新的NameNode的clusterID与DataNode的clusterID保持一致 &…

TCP/IP网络编程:Linux实现的web服务器

请求消息&#xff08;Request Message&#xff09; 的结构 这是客户端向服务端发送的请求消息的结构&#xff0c;Web服务器需要解析并响应客户端请求&#xff0c;从图中看出&#xff0c;请求信息包含请求行&#xff0c;消息头&#xff0c;消息体等三个部分&#xff0c;这里我们…

计算机网络 第1章 概述

文章目录 计算机网络概念计算机网络的组成计算机网络的功能三种数据交换技术电路交换&#xff08;Circuit Switching&#xff09;报文交换&#xff08;message&#xff09;分组交换 三种交换方式性能对比计算机网络的分类计算机网络的性能指标性能指标1&#xff1a;速率性能指标…

重磅!微信放开公众号注册限制!只要手机号,不用实名!

重磅&#xff01;微信放开公众号注册限制&#xff01;只要手机号&#xff0c;不用实名&#xff01; 随着移动互联网的发展&#xff0c;微信公众号已经成为了许多个人与企业传递信息、分享内容的首选平台。就在近日&#xff0c;微信官方再次放出大招&#xff1a;公众号注册无需…

Seataf分布式事务的使用

一、事务的四大特征&#xff08;面试题&#xff09; 原子性&#xff1a;一个事务是不可分割的&#xff0c;要不都做&#xff0c;要不都不做一致性&#xff1a;事务必须是使数据库从一个一致性变成另一个一致性状态隔离性&#xff1a;一个事务的执行不被其他事务干扰&#xff0…

开放式耳机对耳朵伤害大吗?开放式耳机值不值得购买?

开放式耳机对耳朵的伤害相对较小。这是因为开放式耳机通常不需要将耳塞插入耳道&#xff0c;因此不会对耳道造成物理压力&#xff0c;也不会因为耳塞堵塞耳道而增加耳内压力&#xff0c;减少了使用耳机时可能对耳膜和耳道造成的损伤风险。同时&#xff0c;由于开放式耳机不会完…

前端请求的路径baseURL怎么来的 ?nodejs解决cors问题的一种方法

背景&#xff1a;后端使用node.js搭建&#xff0c;用的是express 前端请求的路径baseURL怎么来的 &#xff1f; 前后端都在同一台电脑上运行&#xff0c;后端的域名就是localhost&#xff0c;如果使用的是http协议&#xff0c;后端监听的端口号为3000&#xff0c;那么前端请求…