什麼是無限滾動？

您可能已經看過線上商店等網站，當您向下捲動頁面時，產品會不斷出現。另一個例子是endless.horse，它看起來很簡單，但卻是示範「Infinite Scrolls」功能的絕佳範例。當您訪問該網站時，您會看到一匹馬，但是當您向下滾動頁面時，您會發現馬的腿會無限期地繼續生長，而您永遠不會到達馬的腳。

實現無限滾動

此功能在現代開發中廣泛使用。我們可以在主要社交網路上看到無限滾動，例如 Twitter、Facebook，尤其是 Instagram，當我們向下滾動頁面時，內容似乎永遠不會結束。

在本文中，我將示範此功能的基本實作。然而，這種方法並不能解決諸如長查詢、快取實作以及生產應用程式所需的其他解決方案等問題。儘管如此，這是理解我們如何實現此功能的起點。

第 1 步：決定在何處添加無限滾動功能

首先，決定在哪裡添加無限滾動功能。它是帖子列表還是圖像列表？您還需要決定資料的來源。在此範例中，我們將使用來自基本 API（Random Fox API）的映像。

第 2 步：建立 HTML 文件

建立 HTML 檔案並包含隨機狐狸圖像的容器。

Fox Images

第 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 




  
  
  步驟5：新增滾動事件


要實現無限滾動功能，請新增此事件監聽器：



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




如果scrollY和innerHeight總和大於或等於scrollHeight，則表示我們已經到達文件末尾，因此需要載入更多圖片。 


  
  
  結論


您的頁面現在應該可以使用無限滾動技術。這是您面臨的挑戰：嘗試使用您選擇的另一個 API 重做此項目，並實作一些更精細的樣式來顯示您的項目。祝你好運！