使用 JavaScript 实现无限滚动 _JavaScript

在本教程中，我们将看到一个使用无限滚动方法分解页面内容的简单实现。我们将使用 html、css 和 vanilla JAVAScript 来构建无限滚动功能的高性能且可访问的版本。
什么是无限滚动？无限滚动是一种用于在用户滚动到页面末尾时在页面上动态加载更多内容的功能。
无限滚动的概念用于以一种用户感觉“无缝”的方式从服务器加载数据，但不会因为一次请求太多数据而使服务器过载。
在之前的教程中，我们实现了分页功能，它允许我们将内容分解为称为页面的可导航部分。本教程将使用类似的实现。
原生 JavaScript 的好处使用 JavaScript 的一个显着好处是我们的实现与框架无关，即它不依赖于任何框架，因此可以对其进行修改以在所有框架上工作。
此外，由于我们自己构建功能而不依赖于插件，因此我们可以确保实现是轻量级的并且完全适合我们的需求。
这是最终产品的外观，滚动到笔的底部以加载更多内容：
1.用 HTML 标记我们将从在页面上放置卡片的容器开始。我们将使用 JavaScript 将卡片添加到容器中，因此 div 将为空。
<div id="card-container"></div>

我们还有一个加载器div，用于在添加下一批卡片之前显示动画，以及div用于显示卡片数量和卡片总数的卡片操作。
<div id="loader">
<div class="skeleton-card"></div>
<div class="skeleton-card"></div>
<div class="skeleton-card"></div>
</div>
<div class="card-actions">
<span>Showing
<span id="card-count"></span> of
<span id="card-total"></span> cards
</span>
</div>

加载器和卡片计数 div 的外观
2.使用 CSS 进行样式设置我们将添加到 card-container div 中的卡片将有一个类名“card” 。
#card-container {
display: flex;
flex-wrap: wrap;
}
.card {
height: 55vh;
width: calc((100% / 3) - 16px);
margin: 8px;
border-radius: 3px;
transition: all 200ms ease-in-out;
display: flex;
align-items: center;
justify-content: center;
}
.card:hover {
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.card-actions {
margin: 8px;
padding: 16px 0;
display: flex;
justify-content: space-between;
align-items: center;
}

我们还将通过动画::after伪选择器为加载器 div 中的骨架卡创建加载动画：
#loader {
display: flex;
}
.skeleton-card {
height: 55vh;
width: calc((100% / 3) - 16px);
margin: 8px;
border-radius: 3px;
transition: all 200ms ease-in-out;
position: relative;
background-color: #eaeaea;
}
.skeleton-card::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateX(-100%);
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0));
animation: load 1s infinite;
}
@keyframes load {
100% {
transform: translateX(100%);
}
}

无障碍样式每当我们在网页上包含动画时，重要的是要考虑可访问性的影响。有些用户可能更喜欢根本没有动画，我们可以通过使用媒体规则在样式中考虑这种偏好，prefers-reduced-motion
@media screen and (prefers-reduced-motion: reduce) {
.skeleton-card::after {
animation: none;
}
}

3.JavaScript 的功能让我们分解无限滚动背后的逻辑。

定义要在页面上加载的内容的限制。
检测用户何时到达内容容器的末尾。
到达容器末尾后加载更多内容。
如果没有更多内容要加载，请停止无限滚动。

定义常量首先，让我们从 DOM 中获取我们需要的所有元素：
const cardContainer = document.getElementById("card-container");
const cardCountElem = document.getElementById("card-count");
const cardTotalElem = document.getElementById("card-total");
const loader = document.getElementById("loader");

现在我们需要定义我们的全局变量。
我们需要一个要添加到页面的最大卡片数量的值。如果您从服务器获取数据，则此值是服务器响应的长度。让我们初始化一个 99 的卡片限制。