virtual-scroller

virtual-scroller 介绍

virtual-scroller， 一个 Web 滚动组件，未来它可能会成为 Web 高层级 API（ layered API）的一部分。它的目标是 解决 长列表的 性能 问题，消除离屏渲染。

渲染 性能 主要取决于渲染量， 过多的 DOM 会使你的网站速度变得很慢，即使在本地，也会出现相同的问题，但若通过虚拟滚动的方式，也就是在 用户 滚动时用足够的 内容 填充屏幕并不断更新，就能让网站保持高速运行，这也是 virtual-scroller 的基本原理。?

<virtual-scroller>是未来 Web 平台的 一个 潜在特性，是 layered API 项目的一部分，用于将 JavaScript 对象集映射到 DOM 节点上，并且只渲染当前可见的 DOM 节点，其余部分为“虚拟”的。?

示例

<script type="module"

src="std:virtual-scroller|https://some.cdn.com/virtual-scroller.js">

</script>

<virtual-scroller></virtual-scroller>

<script type="module">

const scroller = document.querySelector('virtual-scroller');

const myItems = new Array(200).fill('item');

scroller.updateElement = (child,item,index) => {

child.textContent = index + ' - ' + item;

child.onclick = () => console.log(`clicked item #${index}`);

};

// This will automatically cause a render of the visible children

// (i.e.,those that fit on the screen).

scroller.itemSource = myItems;

</script>

网站地址 : https://valdrinkoshi.github.io/virtual-scroller/

GitHub: https://github.com/valdrinkoshi/virtual-scroller

网站描述: 一个 Web 滚动组件

virtual-scroller官方网站

官方网站： https://valdrinkoshi.github.io/virtual-scroller/

如果觉得 网站内容还不错，欢迎将 网站 推荐给程序员好友。

查看更多关于virtual-scroller的详细内容...