以下是关于虚拟滚动加加载的原理和实现思路：
一、虚拟滚动原理
1. 基本概念
- 可视区域：
- 用户在屏幕上看到的部分，是实际渲染内容的窗口。只有处于可视区域内的元素才会被渲染到 DOM 中，而其他部分不会被渲染，从而减少 DOM 元素的数量，提高性能。
2. 实现思路
-
数据存储与显示：
- 存储大量的数据列表，但仅渲染可视区域内的数据。例如，有一个包含 10000 个元素的数据列表，但可视区域内只能显示 10 个元素，那么仅渲染这 10 个元素。
-
计算可视区域：
- 计算可视区域的高度和位置，根据滚动位置确定需要显示的数据范围。例如，通过
scrollTop（滚动条的滚动距离）、clientHeight（可视区域的高度）和itemHeight（每个元素的高度）来计算开始和结束索引。
- 计算可视区域的高度和位置，根据滚动位置确定需要显示的数据范围。例如，通过
-
监听滚动事件：
- 监听滚动容器的滚动事件，当滚动时重新计算可视区域和需要渲染的数据范围，更新 DOM 元素。
二、代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Virtual Scrolling</title>
<style>
#scroll-container {
height: 300px;
overflow-y: scroll;
position: relative;
}
#content {
position: absolute;
width: 100%;
}
#content div {
height: 30px;
line-height: 30px;
}
</style>
</head>
<body>
<div id="scroll-container">
<div id="content"></div>
</div>
<script>
const data = Array.from({ length: 10000 }, (_, i) => `Item ${i}`);
const itemHeight = 30;
const container = document.getElementById('scroll-container');
const content = document.getElementById('content');
function renderItems(startIndex, endIndex) {
content.innerHTML = '';
for (let i = startIndex; i < endIndex; i++) {
const item = document.createElement('div');
item.textContent = data[i];
content.appendChild(item);
}
}
function onScroll() {
const scrollTop = container.scrollTop;
const startIndex = Math.floor(scrollTop / itemHeight);
const endIndex = Math.floor((scrollTop + container.clientHeight) / itemHeight);
renderItems(startIndex, endIndex);
}
container.addEventListener('scroll', onScroll);
// 初始渲染
onScroll();
</script>
</body>
</html>
三、代码解释
-
CSS 部分：
#scroll-container是滚动容器，设置overflow-y: scroll允许垂直滚动，height限定可视区域的高度。#content是实际渲染元素的容器，使用position: absolute以便动态调整其位置。
-
JavaScript 部分：
data是一个包含大量元素的数组。itemHeight是每个元素的高度，这里设置为 30px。renderItems函数根据开始和结束索引，将对应的数据元素添加到content容器中。onScroll函数在滚动时被调用，根据滚动位置计算开始和结束索引，调用renderItems函数更新显示。
四、加载更多原理
1. 基本概念
- 分页加载：
- 当滚动到列表底部时，加载更多数据添加到列表中，类似于分页的概念，但用户体验更加流畅，无需手动点击分页按钮。
2. 实现思路
-
滚动到底部检测：
- 计算滚动位置和内容高度，当滚动到底部时触发加载更多数据的操作。例如，当
scrollTop + clientHeight >= scrollHeight时，表示滚动到了底部。
- 计算滚动位置和内容高度，当滚动到底部时触发加载更多数据的操作。例如，当
-
加载数据：
- 当滚动到底部时，通过 AJAX 或其他方式从服务器或数据源获取新的数据，添加到原数据列表中，更新可视区域的渲染。
五、代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Virtual Scrolling with Load More</title>
<style>
#scroll-container {
height: 300px;
overflow-y: scroll;
position: relative;
}
#content {
position: absolute;
width: 100%;
}
#content div {
height: 30px;
line-height: 30px;
}
</style>
</head>
<body>
<div id="scroll-container">
<div id="content"></div>
</div>
<script>
let data = Array.from({ length: 100 }, (_, i) => `Item ${i}`);
const itemHeight = 30;
const container = document.getElementById('scroll-container');
const content = document.getElementById('content');
let isLoading = false;
function renderItems(startIndex, endIndex) {
content.innerHTML = '';
for (let i = startIndex; i < endIndex; i++) {
const item = document.createElement('div');
item.textContent = data[i];
content.appendChild(item);
}
}
function onScroll() {
const scrollTop = container.scrollTop;
const startIndex = Math.floor(scrollTop / itemHeight);
const endIndex = Math.floor((scrollTop + container.clientHeight) / itemHeight);
renderItems(startIndex, endIndex);
if (scrollTop + container.clientHeight >= container.scrollHeight - itemHeight &&!isLoading) {
isLoading = true;
// 模拟从服务器加载数据
setTimeout(() => {
const newData = Array.from({ length: 100 }, (_, i) => `Item ${data.length + i}`);
data = data.concat(newData);
isLoading = false;
renderItems(0, data.length);
}, 1000);
}
}
container.addEventListener('scroll', onScroll);
// 初始渲染
onScroll();
</script>
</body>
</html>
六、代码解释
-
CSS 部分：
- 与之前的虚拟滚动示例类似，设置滚动容器和元素的样式。
-
JavaScript 部分：
data初始包含 100 个元素。isLoading用于标记是否正在加载数据，避免重复加载。onScroll函数在滚动时，除了更新可视区域的渲染，还检查是否滚动到底部，若是，则使用setTimeout模拟从服务器加载数据（添加 100 个新元素），更新data并重新渲染。
七、总结
-
虚拟滚动：
- 仅渲染可视区域内的数据，通过监听滚动事件更新渲染的元素，减少 DOM 元素数量，提高性能。
-
加载更多：
- 当滚动到列表底部时，加载更多数据添加到列表中，实现无缝滚动加载，提高用户体验。
通过结合虚拟滚动和加载更多的技术，可以在处理大量数据列表时，提供流畅的用户体验和良好的性能，避免页面卡顿和长时间的加载等待。在实际应用中，可以根据具体需求优化代码，例如添加加载动画、优化数据加载方式等。
标签：const,滚动,content,虚拟,scrollTop,container,加载 From： https://www.cnblogs.com/zsnhweb/p/18646206