使用 JavaScript 理解和實現無限滾動-js教程-PHP中文網

使用 JavaScript 理解和實現無限滾動

王林

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

原創

745 人瀏覽過

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，則表示我們已經到達文件末尾，因此需要載入更多圖片。