javascript上的虚拟滚动 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

react虚拟滚动的实现

(i++)) } return arr } const data = getData() const itemHeight = 21 const itemLength = 10 // 是否开启虚拟滚动

1.9K3 0

基于React的虚拟滚动方案

描述实现虚拟滚动通常并不是非常复杂的事情，但是我们需要考虑到很多细节问题。在具体实现之前我思考了一个比较有意思的事情，为什么虚拟滚动能够优化性能。...固定高度实际上关于虚拟滚动的方案在社区有很多参考，特别是固定高度的虚拟滚动实际上可以做成非常通用的解决方案。那么在这里我们以ArcoDesign的List组件为例来研究一下通用的虚拟滚动实现。...那么实际上Arco就是通过列表元素的数量与每个元素的高度，从而计算出了整个容器的高度，这里要注意滚动容器实际上应该是虚拟滚动的容器外的元素，而对于视口内的区域则可以通过transform: translateY...需要注意的是，IntersectionObserver对象的应用场景是观察目标元素与视口的交叉状态，而我们的虚拟滚动核心概念是不渲染非视口区域的元素，所以这里边实际上出现了一个偏差，在虚拟滚动中目标元素都不存在或者说并未渲染...实现虚拟滚动的效果，实际上是可以的，但是可能需要OnScroll来辅助节点的强制刷新。

4841 0

您找到你想要的搜索结果了吗？

是的

没有找到

虚拟滚动的 3 种实现方式！

元素固定高度的虚拟列表元素不定高度的虚拟列表元素动态高度的虚拟列表虚拟列表核心原理我们先来看一下整个虚拟列表元素的表现。...static-height-scroll 从上面两图我们可以总结出，整个虚拟列表划分为三个区域，分别是上缓冲区(0/2个元素)，可视区(n个元素)，下缓冲区(2个元素)。...当我们滚动到一个元素离开可视区范围内时，就去掉上缓冲区顶上的一个元素，然后再下缓冲区增加一个元素。这就是虚拟列表的核心原理了。...（2）计算出可视区的起始索引、上缓冲区的起始索引以及下缓冲区的结束索引（就像上图滚动后，上缓冲区的起始索引为2，可视区起始索引为4，下缓冲区结束索引为9）。...，我们根据上一次记录的最大的索引的那个元素不断累加新元素的高度，直到它大于已经滚动掉的高度，此时的索引值就是可视区的起始索引了，这个起始索引所对应的top就是累加的高度。

2.9K1 0

JavaScript实现竖直文本滚动

ria w3c has released html5 bom javascript...ccc; } #scrollContainer { width: 245px; margin: 2px 5px; overflow: hidden; text-align: left; } 三、Javascript...代码 var stopscroll = false; var scrollContHeight = 95; //滚动区域的高度 var scrollContWidth = 230; //滚动区域的宽度...var scrollSpeed = 25; //滚动的速度，越小滚动越快 var scrollContainer = document.getElementById("scrollContainer...；鼠标离开，继续滚动 scrollContainer.onmouseover = new Function("stopscroll = true"); scrollContainer.onmouseout

9211 0

虚拟滚动之原理及其封装

虚拟滚动之原理及其封装这仍然是笔者正在进行中某个前端基础项目的一项基础研究。...（实际上是把锅丢到了后面）•无法实现动态反映选中状态•滚动条无法正确反映操作者当前浏览的信息在全部列表中的位置。而且我百万级数据加载，你一次给我加载十几条，滚到底太慢了，是想愚弄用户吗！...可视区渲染有个更出名的名字，叫做虚拟滚动——指的是只渲染可视区域的列表项，非可见区域的完全不渲染，在滚动条滚动时动态更新列表项。...相比较于懒渲染，虚拟滚动要求一次性全部拿到数据，但是滚动条能够完全正确地反映当前页面在全部数据的位置。滚动无非是对几十个dom进行操作，可以达到极高的后续渲染性能。...实现实现虚拟滚动就是处理滚动条滚动后的可见区域的变更，其中具体步骤如下： 1.计算当前可见区域起始数据的 startIndex2.计算当前可见区域结束数据的 endIndex3.计算当前可见区域的数据

10.3K2 0

javascript禁止移动端网页滚动

禁止网页滚动，电脑端其实只要给body加overflow: hidden;css即可，移动端测试发现谷歌可以，国产浏览器阵亡，其实我记得很久之前我遇到过这个问题，最后好像用纯css解决了，但是想不起来了...，于是乎百度搜了个js的方法，故记录下！...passive:false});//禁止页面滑动 document.removeEventListener("touchmove",mo,{passive:false});//恢复可滑动尝试给body的css...设置position: fixed;来解决问题，但是这样网页就乱了，所以最终还是用js解决了下，如果哪位大佬知道怎么文雅的用css解决这个问题，请务必留言告知，谢谢！

2.1K2 0

JavaScript代码获取浏览器的可视高、文档滚动高和滚动距离

JavaScript 代码中，获取的滚动距离（ scrollTop ）和文档高度（ scrollHeight ）都是以像素为单位的值。...); } 说明：这个函数用于获取文档的滚动高度。...如果测试时，发现页面有滚动条，但是获取的滚动高度和可视高度一样，要注意看滚动条是不是 iframe 内嵌框架里的，上面可以进行切换，默认的 top 是默认最外层的框架。...把滚动条滚动到最底下，滚动的距离就是滚动高-可视高。...var scrollHeight = document.body.scrollHeight; document.body.scrollTop 文档的元素的垂直滚动距离，即从顶部到滚动条的距离

1.1K0 0

JavaScript 滚动页面到指定元素位置

页面评论功能，当评论较多时，有时须要滚动到评论头部。

4.4K2 0

JavaScript Promise（上）

Promise 是一个 ECMAScript 6 提供的类，目的是更加优雅地书写复杂的异步任务。...由于 Promise 是 ES6 新增加的，所以一些旧的浏览器并不支持，苹果的 Safari 10 和 Windows 的 Edge 14 版本以上浏览器才开始支持 ES6 特性。...我们之前遇到的异步任务都是一次异步，如果需要多次调用异步函数呢？...可想而知，在一个复杂的程序当中，用 "函数瀑布" 实现的程序无论是维护还是异常处理都是一件特别繁琐的事情，而且会让缩进格式变得非常冗赘。...Promise 将嵌套格式的代码变成了顺序格式的代码。

3641 0

JavaScript 入门（上）

二、JavaScript编辑工具三、JavaScript在HTML的引用方式四、JavaScript和Java的关系五、训练题 2、JavaScript入门基础一、数据结构二、JavaScript...十一、split()方法十二、从字符串提取字符串 7、日期对象一、创建日期对象二、日期对象方法 ---- 预备知识与后续知识及项目案例 [HTML入门与进阶以及HTML5] [CSS] [JS-上]...JavaScript和Java虽然名字相似，但是本质上是不同的。...（1）JavaScript往往都是在网页中使用，而Java却可以在软件、网页、手机App等各个领域中使用；（2）Java是一门面向对象的语言，而从本质上讲，JavaScript更像是一门函数式编程语言...有可能这些技巧一时半会你用不上，但是学习知识有一种说法是：你只有接触了某个知识点，即使将来你已经忘记了这个知识点具体是怎样的了，不过你却能想到用这么一个知识去帮你解决某些问题。

8603 0

JavaScript事件（上)

在JavaScript中，事件往往是页面的一些动作引起的，例如当用户按下鼠标或者提交表单，甚至在页面移动鼠标时，事件都会出现。...二、JavaScript事件在JavaScript中，调用事件的方式共有2种：（1）在script标签中调用；在script标签中调用事件，也就是在</script标签内部调用事件...（2）在元素中调用；在元素事件中引入JS，就是指在元素的某一个属性中直接编写JavaScript程序或调用JavaScript函数，这个属性指的是元素的“事件属性”。...举例1：（在元素事件属性中直接编写JavaScript） JavaScript元素中调用的。这2种调用JavaScript事件的方式，大家刚刚开始看不理解没关系，我们只是给大家说个语法，留个印象。在接下来的章节中，我们会经常接触。

5792 0

JavaScript 对象（上）

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数... 此外，JavaScript 允许自定义对象。...---- 所有事物都是对象 JavaScript 提供多个内建对象，比如 String、Date、Array 等等。对象只是带有属性和方法的特殊数据类型。布尔型可以是一个对象。...; var x=message.length; 在以上代码执行后，x 的值将是： 12 ---- 访问对象的方法方法是能够在对象上执行的动作。...---- 创建 JavaScript 对象通过 JavaScript，您能够定义并创建自己的对象。创建新对象有两种不同的方法：使用 Object 定义并创建对象的实例。...使用 Object 在 JavaScript 中，几乎所有的对象都是 Object 类型的实例，它们都会从 Object.prototype 继承属性和方法。

2662 0

Vue项目中的虚拟滚动：提升页面渲染性能的最佳实践

尤其在数据量较大的情况下，页面的渲染性能会直接影响用户体验。使用虚拟滚动技术，可以有效解决大数据量下的渲染性能问题。本篇文章将带你深入了解虚拟滚动的应用，帮助你在Vue项目中优化页面渲染性能。...什么是虚拟滚动虚拟滚动（Virtual Scrolling）是一种高效的渲染技术，主要用于处理大量数据的长列表或表格。其基本原理是只渲染当前视口内可见的元素，而对不可见的部分仅保留占位符。...这种方法大幅减少了DOM节点的数量，从而提升了渲染性能和滚动流畅度。虚拟滚动的核心有以下 4 点：渲染可见元素：虚拟滚动只会渲染当前视口内的元素，而不是整个列表或表格。...占位元素：为了确保滚动条的正确性，虚拟滚动技术通常会使用一个高度为所有元素总高度的占位元素。这种占位元素会占据整个列表的高度，从而使滚动条的行为与渲染所有元素时相同。...实现方式由于我这里是 Vue的项目，这里推荐一个很好用的第三方库：vue-virtual-scroller。在 GitHub 上，可以看到针对 Vue2 或者 Vue3 的使用说明。

7K1 0

mini react-window(一) 实现固定高度虚拟滚动

，可视区域有限，看到的数据有限，在用户滚动时，指渲染可是区域内的内容即可，dom 少，渲染少在 github 上也有很多针对 react 的虚拟滚动的库，我们这里对 react-window 的使用和实现...，进行一下简单的学习分享，了解不同虚拟滚动场景下的使用方式和 react 的优秀封装，希望对你有帮助。...实现固定渲染虚拟滚动创建自己实现组件的目录// src/react-window/index.jsexport {default as FixedSizeList} from '....实现 FixedSizeList 组件时我们要注意我们没有直接写， react-window 提供了固定高度非固定高的等几种虚拟滚动场景，但是对于包裹元素来说基本都是一致的，只是具体的场景元素处理有不同...图片本小节我们实现了固定高度虚拟列表，代码不是很多，感兴趣的小伙伴可以自己动手实现自己的虚拟滚动库，下一小节我们继续实现其他场景下的滚动列表，如有问题欢迎留言讨论。

2.6K5 1

高并发 Javascript: 存在的！（上）

目前 Javascript 虚拟机(VM) 的优化利用了只有一个执行线程的基本事实，因此高并发肯定会带来一些性能问题。本文考虑的问题是这是否在技术上是可行的，如果可行，那代价会是什么？...这些相似性暗示很多已经应用在 Java 虚拟机上的用以支持并发的技术可以被重用在实现 Javascript 的并发上。真正困难的部分在于 Javascript 动态重新配置对象的能力。...在最坏的情况下，由于内部对象状态被污染了，虚拟机发生崩溃。...没有竞争应该导致虚拟机崩溃、丢失写入、或者属性值发生时间旅行我们提出了一种算法，它允许大多数的 Javascript 对象访问是不用等待的(wait-free)，并且相较于我们已经存在的序列化 JS...---- 往期精选文章使用虚拟dom和JavaScript构建完全响应式的UI框架扩展 Vue 组件使用Three.js制作酷炫无比的无穷隧道特效一个治愈JavaScript疲劳的学习计划全栈工程师技能大全

1.3K2 0

GaiaStack上的GPU虚拟化技术

为什么需要GPU虚拟化根据平台收集的GPU使用率的历史，我们发现独占卡的模式会对GPU这种宝贵计算资源存在浪费现象，即不同用户对模型的理解深度不同，导致申请了独立的卡却没有把资源用满的情况。...针对这种情况，虚拟化GPU技术可以更好的解决这种痛点，让机器的计算资源得到充分利用。...NVIDIA在前几年释放出来一个NVIDIA vGPU的一个硬件虚拟化的技术，该技术的介绍是 NVIDIA Virtual GPU允许多虚拟机能够同时直接访问单个物理GPU的能力，只需要在虚拟机上装上与宿主机相同的驱动设备...通过这种方式，NVIDIA vGPU给多个虚拟机非并行化图形性能，以及应用的兼容性，在不同负载间来共享一个GPU。 ?...NVIDIA技术优缺点 NVIDIA GRID NVIDIA在vGPU技术上提供了2种模式，GPUpassthrough和Bare-Metal Deployment。

10.1K7 4

JavaScript 类型转换(上)

---- JavaScript 数据类型在 JavaScript 中有 6 种不同的数据类型： string number boolean object function symbol 3 种对象类型...： Object Date Array 2 个不包含任何值的数据类型： null undefined ---- typeof 操作符你可以使用 typeof 操作符来查看 JavaScript 变量的数据类型...number 数组(Array)的数据类型是 object 日期(Date)的数据类型为 object null 的数据类型是 object 未定义变量的数据类型为 undefined 如果对象是 JavaScript...Array 或 JavaScript Date ，我们就无法通过 typeof 来判断他们的类型，因为都是返回 object。...---- constructor 属性 constructor 属性返回所有 JavaScript 变量的构造函数 "John".constructor // 返回函数

7362 0

JavaScript Number 对象（上）

极大或极小的数字可通过科学（指数）计数法来写：实例 var y=123e5; // 12300000 var z=123e-5; // 0.00123 ---- 所有 JavaScript...与许多其他编程语言不同，JavaScript 不定义不同类型的数字，比如整数、短、长、浮点等等。在JavaScript中，数字不分为整数类型和浮点型类型，所有的数字都是由浮点型类型。...JavaScript 采用 IEEE754 标准定义的 64 位浮点格式表示数字，它能表示最大值（Number.MAX_VALUE）为 ±1.7976931348623157e+308，最小值（Number.MIN_VALUE...所能表示的数字上限（溢出），结果为一个特殊的无穷大（infinity）值，在JavaScript中以Infinity表示。...同样地，当负数的值超过了JavaScript所能表示的负数范围，结果为负无穷大，在JavaScript中以-Infinity表示。

3992 0

初探富文本之基于虚拟滚动的大型文档性能优化方案

在这种情况下，我们同样可以基于行的概念实现块级虚拟滚动，即只渲染当前可见区域范围的块，实际上如果独立的块比较大的时候还是有可能影响性能，所以这里仍然存在优化空间，例如飞书文档就对代码块做了特殊处理，即使在嵌套的情况下仍然存在虚拟滚动...而实际上如果仅仅是动态高度的虚拟滚动也并不是特别困难，社区已经有大量的实现方案，但是我们的文档编辑器是有很多复杂的模块在内的，例如选区模块、评论功能、锚点跳转等等，要兼容这些模块便是在文档本体虚拟滚动之外需要关注的功能实现...虚拟滚动的实现方式本质上就是在用户滚动视图时，根据视口的高度、滚动容器的滚动距离、行的高度等信息计算出当前视口内需要渲染的行，然后在视图层根据计算的状态来决定是否要渲染。...所以这里边实际上出现了一个偏差，在虚拟滚动中目标元素都不存在或者说并未渲染，那么此时是无法观察其状态的。...当然，实际上白屏的时间通常不会太长，而且在拥有占位节点的情况下交互体验上通常也是可以接受的，所以在这里的优化策略还是需要看具体的用户需求与反馈的，毕竟我们的虚拟滚动目标之一就是减少内存占用，进行快速滚动时通常时需要调度滚动方向上的更多块提前渲染

1.1K1 0

轻量级滚动动画JavaScript库aos.js

一、简介 aos.js是一款效果超赞的页面滚动的 JavaScript 动画库插件。该动画库可以在页面滚动时提供28种不同的元素动画效果，以及多种easing效果。...在页面往回滚动时，元素会恢复到原来的状态。注：从2.0.0版本之后,只支持使用data-aos属性，不再支持使用aos属性。二、安装 1....Bower 安装你可以使用 Bower 包管理工具安装aos： bower install aos --save 2. npm 你也能在 npm 上找到 aos： npm install aos --...使用方法引入CSS样式文件：添加JavaScript脚本文件：..." src="aos.js"> javascript"> function initLoad() { AOS.init()

2.5K1 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭