JavaScript 如何使用onScroll事件创建无限滚动

当我们打开网站并向下滚动到底部时，我们会看到更多的产品被获取和显示，并且随着我们继续滚动，更多的产品会被加载和获取，直到没有更多的产品需要显示。这就是我们所说的 无限滚动 。我们将使用 onScroll 事件来实现类似的功能。

现在让我们实现无限滚动。

方法：

我们将声明一个变量 pageNum 并将其初始值设为 1 。
我们将创建一个可滚动的

元素，其class为 container ，在这个

中，我们将显示从API获取的所有结果。我们将使用一个带有分页的API和端点 https://api.github.com/repositories/1300192/issues?page=${pageNum} 。
* 我们将创建一个函数 fetchData ，负责从API获取数据。
* 对于这个 container 元素，我们将附加 onscroll 事件，并检查当我们到达 container 的底部时，通过调用函数 fetchData 来增加 pageNum 并获取更多数据。我们将检查 Math.ceil(container.clientHeight + container.scrollTop) >= container.scrollHeight，如果条件成立，则表示我们到达了 container 的底部。

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Page Title</title> 
    <link rel="stylesheet" href="./src/styles.css" /> 
</head> 
  
<body> 
    <div class="container"> 
        <h1>GeeksforGeeks Infinite Scrolling</h1> 
        <div class="result-container"></div> 
        <div class="loading-container"></div> 
    </div> 
    <script src="src/index.js"></script> 
</body> 
  
</html>

CSS

body { 
    font-family: sans-serif; 
    background-color: green; 
} 
  
.container { 
    background-color: white; 
    width: 500px; 
    height: 300px; 
    border: 2px solid black; 
    position: fixed; 
    left: 50%; 
    transform: translateX(-50%); 
    padding: 30px; 
    overflow-y: scroll; 
} 
  
.loading-container { 
    margin-top: 10px; 
    font-family: Cambria, Cochin, Georgia,  
        Times, "Times New Roman", serif; 
    font-size: 30px; 
    text-align: center; 
} 
  
.search-data { 
    margin-top: 10px; 
    height: 30px; 
    font-family: Verdana, Geneva,  
        Tahoma, sans-serif; 
}

Javascript

let pageNum = 1; 
let isLoading = false; 
const container = document.querySelector(".container"); 
const loadingContainer = 
    document.querySelector(".loading-container"); 
const resultContainer = 
    document.querySelector(".result-container"); 
  
function fetchData() { 
    if (isLoading) return; 
    isLoading = true; 
    loadingContainer.innerHTML = "Loading ..."; 
    fetch(`https://api.../issues?page=${pageNum}`) 
        .then((res) => { 
            res.json().then((finalRes) => { 
                finalRes.forEach((item) => { 
                    const resultDiv = document.createElement("div"); 
                    resultDiv.textContent = item.title; 
                    resultDiv.classList.add("search-data"); 
                    resultContainer.appendChild(resultDiv); 
                }); 
                isLoading = false; 
                loadingContainer.innerHTML = ""; 
            }) 
                .catch((e) => { 
                    isLoading = false; 
                    loadingContainer.innerHTML = ""; 
                }); 
        }) 
        .catch((err) => { 
            isLoading = false; 
            loadingContainer.innerHTML = ""; 
        }); 
} 
  
container.onscroll = () => { 
    if (isLoading) return; 
  
    if ( 
        Math.ceil(container.clientHeight  
            + container.scrollTop) >= 
            container.scrollHeight 
    ) { 
        pageNum++; 
        fetchData(); 
    } 
}; 
  
fetchData();

输出：

JavaScript 如何使用onScroll事件创建无限滚动