使用 JavaScript 理解和实现无限滚动-js教程-PHP中文网

使用 JavaScript 理解和实现无限滚动

王林

发布： 2024-07-23 12:35:31

原创

618 人浏览过

Entendendo e Implementando o Scroll Infinito com JavaScript

什么是无限滚动？

您可能已经见过在线商店等网站，当您向下滚动页面时，产品会连续出现。另一个例子是endless.horse，它看起来很简单，但却是演示“无限卷轴”功能的绝佳示例。当您访问该网站时，您会看到一匹马，但是当您向下滚动页面时，您会发现马的腿会无限期地生长，而您永远不会到达马的脚。

实现无限滚动

此功能在现代开发中广泛使用。我们可以在主要社交网络上看到无限滚动，例如 Twitter、Facebook，尤其是 Instagram，当我们向下滚动页面时，内容似乎永远不会结束。

在本文中，我将演示此功能的基本实现。然而，这种方法并不能解决诸如长查询、缓存实现以及生产应用程序所需的其他解决方案等问题。尽管如此，这是理解我们如何实现此功能的起点。

第 1 步：决定在何处添加无限滚动功能

首先，决定在哪里添加无限滚动功能。它是帖子列表还是图像列表？您还需要决定数据的来源。在此示例中，我们将使用来自基本 API（Random Fox API）的图像。

第 2 步：创建 HTML 文件

创建 HTML 文件并包含随机狐狸图像的容器。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fox Images</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 class="header">Fox Images</h1>
<div class="container"></div>
<script src="script.js"></script>
</body>
</html>

登录后复制

第 3 步：创建 CSS 文件

对于这个示例，我们将保持样式表非常简单。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.header {
  font-size: 32px;
  color: black;
  text-align: center;
  font-family: Verdana, sans-serif;
}

img {
  width: 400px;
  height: 400px;
  margin: 4px;
  object-fit: cover;
}

登录后复制

第 4 步：创建 JavaScript 文件

选择容器并获取 Random Fox API URL。不要忘记在 HTML 中链接您的 JavaScript 和 CSS 文件。

const container = document.querySelector('.container');
const URL = "https://randomfox.ca/images/";

function getRandomNumber() {
  return Math.floor(Math.random() * 100);
}

function loadImages(numImages = 6) {
  let i = 0;
  while (i < numImages) {
    const img = document.createElement('img');
    img.src = `${URL}${getRandomNumber()}.jpg`;
    container.appendChild(img);
    i++;
  }
}

loadImages();

登录后复制

第5步：添加滚动事件

要实现无限滚动功能，请添加此事件监听器：

window.addEventListener('scroll', () => {
  if (window.scrollY + window.innerHeight >= document.documentElement.scrollHeight) {
    loadImages();
  }
});

登录后复制

如果scrollY和innerHeight之和大于或等于scrollHeight，则意味着我们已经到达文档末尾，因此需要加载更多图像。