HTML 和 JavaScript 实现无限滚动效果
以下是一个使用 HTML 和 JavaScript 实现无限加载的示例代码：
HTML 代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Infinite Scroll Example</title>
</head>
<body>
<div id="content">
<!-- 初始内容 -->
<p>这是第1页的内容</p>
<p>这是第2页的内容</p>
<p>这是第3页的内容</p>
<p>这是第4页的内容</p>
<p>这是第5页的内容</p>
</div>
<div id="loading">
<!-- 加载提示 -->
<p>Loading...</p>
</div>
<script src="infinite-scroll.js"></script>
</body>
</html>
JavaScript 代码（保存为infinite-scroll.js）：
// 获取页面元素
const content = document.getElementById('content');
const loading = document.getElementById('loading');
// 设置初始页码为1
let page = 1;
// 加载函数
function loadMore() {
// 显示加载提示
loading.style.display = 'block';
// 模拟加载数据（这里使用setTimeout模拟异步加载）
setTimeout(() => {
// 隐藏加载提示
loading.style.display = 'none';
// 模拟加载5条数据
for (let i = 1; i <= 5; i++) {
// 创建新的内容元素
const newContent = document.createElement('p');
newContent.textContent = '这是第' + (page * 5 + i) + '页的内容';
// 添加到页面中
content.appendChild(newContent);
}
// 增加页码
page++;
}, 1000);
}
// 监听滚动事件
window.addEventListener('scroll', () => {
// 如果滚动到了页面底部
if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
// 加载更多数据
loadMore();
}
});
如上所示，该代码会在页面底部监听滚动事件，当滚动到页面底部时，会异步加载5条新的数据，并将其添加到页面中。加载过程中会显示加载提示。用户可以无限滚动页面，以加载更多数据。
原文地址: https://www.cveoy.top/t/topic/nf87 著作权归作者所有。请勿转载和采集!