带有html内容的无限滚动条

Question

我看过很多解释如何制作无限滚动器的视频，但所有这些视频都需要一个数据库来加载，然后显示一些内容。难道不可能使用我已经在HTML上设计的分区来制作一个无限滚动器吗？

为了更清楚地说明，这里有一个代码，其中包含一些框：https://jsfiddle.net/hugot1944/0fbuvsrz/10/

难道不可能制作一个无限滚动器，将这些分区标记为框吗？比如说，我不能一开始显示从ID为box1到box6的框，然后每当用户滚动时显示另外6个分区吗？

以下是我所说的部门代码：

/*Box Wrapper Design*/
.boxWrapper{
width: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 2em;
grid-row-gap: 5em;
margin-top: 120px;
}
.boxWrapper .box{
background-color: rgb(241, 240, 240);
width: 300px;
height: 355px;
margin: 0 auto;
text-align: center;
}
.boxWrapper .box img{
width: 100%;
height: 84.5%;
}
.boxWrapper .box a{
font-size: 22px;
font-weight: normal;
}
.boxWrapper .box p{
font-family: "Lato", sans-serif;
font-weight: bold;
font-size: 18px;
color: rgb(22, 22, 22);
}

<div class="boxWrapper">
<div class="box" id="box1">
<a href="/characters/character1.html">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png"/>
<p>Character 1</p>
</a>
</div>
<div class="box" id="box2">
<a href="/characters/character1.html">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png"/>
<p>Character 2</p>
</a>
</div>
<div class="box" id="box3">
<a href="/characters/character1.html">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png"/>
<p>Character 3</p>
</a>
</div>
<div class="box" id="box4">
<a href="/characters/character1.html">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png"/>
<p>Character 4</p>
</a>
</div>
<div class="box" id="box5">
<a href="/characters/character1.html">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png"/>
<p>Character 5</p>
</a>
</div>
<div class="box" id="box6">
<a href="/characters/character1.html">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png"/>
<p>Character 6</p>
</a>
</div>

<div class="box" id="box7">
<a href="/characters/character1.html">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png"/>
<p>Character 7</p>
</a>
</div>
<div class="box" id="box8">
<a href="/characters/character1.html">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png"/>
<p>Character 8</p>
</a>
</div>
<div class="box" id="box9">
<a href="/characters/character1.html">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png"/>
<p>Character 9</p>
</a>
</div>
<div class="box" id="box10">
<a href="/characters/character1.html">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png"/>
<p>Character 10</p>
</a>
</div>
<div class="box" id="box11">
<a href="/characters/character1.html">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png"/>
<p>Character 11</p>
</a>
</div>
<div class="box" id="box12">
<a href="/characters/character1.html">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png"/>
<p>Character 12</p>
</a>
</div>
</div>

Answer 1

首先你需要了解滚动的概念，"滚动(在网页上)只有当你的网站内容超过视口高度时才会发生。并且一个人只能滚动直到他/她到达特定页面上的内容的末尾">。

现在，在您的情况下，数据是static，您有div，它最终占据各自的高度，最后，一旦用户滚动到最后一个div，就这样了。由于没有更多的内容/数据，所以没有滚动

因此，直接的答案是使用上述静态设置，它是不可能有无限滚动。对于无限滚动，当用户滚动到页面底部时，我们必须从后端API加载数据。

Answer 2

我为您创建了一个示例，希望它能有所帮助。

// Here is what you need
// I tried to make it as simple as possible for you
var currentNumOfBoxes = 6;
var boxWrapper = document.getElementsByClassName('boxWrapper')[0];

function createBox(num) {
var newBoxNumber = num + 1;

var box = document.createElement("div");
box.setAttribute("class", "box");
box.setAttribute("id", "box" + newBoxNumber);

var link = document.createElement("a");
link.setAttribute("href", "/characters/character1.html");

var img = document.createElement("img");
img.setAttribute("src", "https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png");

var paragraph = document.createElement("p");
paragraph.innerHTML = "Character " + newBoxNumber;

link.append(img);
link.append(paragraph);
box.append(link);
boxWrapper.append(box);

currentNumOfBoxes++;
}

window.onscroll = function(ev) {
if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight) {
createBox(currentNumOfBoxes);
}
};

/* Your CSS I didn't touch here */
html, body {
width: 100%;
height: 100%;
background: #737373;
}

/*Box Wrapper Design*/
.boxWrapper{
width: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 2em;
grid-row-gap: 5em;
margin-top: 120px;
}

.boxWrapper .box{
background-color: rgb(241, 240, 240);
width: 300px;
height: 355px;
margin: 0 auto;
text-align: center;
}

.boxWrapper .box img{
width: 100%;
height: 84.5%;
}

.boxWrapper .box a{
font-size: 22px;
font-weight: normal;
}

.boxWrapper .box p{
font-family: "Lato", sans-serif;
font-weight: bold;
font-size: 18px;
color: rgb(22, 22, 22);
}

<!-- Here your 6 initial box. I didn't touch here -->
<div class="boxWrapper">
<div class="box" id="box1">
<a href="/characters/character1.html">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png"/>
<p>Character 1</p>
</a>
</div>
<div class="box" id="box2">
<a href="/characters/character1.html">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png"/>
<p>Character 2</p>
</a>
</div>
<div class="box" id="box3">
<a href="/characters/character1.html">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png"/>
<p>Character 3</p>
</a>
</div>
<div class="box" id="box4">
<a href="/characters/character1.html">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png"/>
<p>Character 4</p>
</a>
</div>
<div class="box" id="box5">
<a href="/characters/character1.html">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png"/>
<p>Character 5</p>
</a>
</div>
<div class="box" id="box6">
<a href="/characters/character1.html">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png"/>
<p>Character 6</p>
</a>
</div>
</div>

Answer 3

function atEnd() {
var c = [document.scrollingElement.scrollHeight, document.body.scrollHeight, document.body.offsetHeight].sort(function(a, b) {
return b - a
}) // select longest candidate for scrollable length
return (window.innerHeight + window.scrollY + 2 >= c[0]) // compare with scroll position + some give
}
// This is the no. of divs we start with
let start = 4;
// This is the number we load every time the user reaches end
let newboxes = 4;
// Hide all boxes by default
let boxes = document.querySelectorAll('.box')
boxes.forEach((box) => {
box.classList.add('hidden')
})
// Show some boxes as start
for (let i = 0; i < start; i++) {
boxes[i].classList.remove('hidden')
}
// Set event listener for scroll
window.addEventListener('scroll', () => {
// If all boxes have appeared then return
if (start == boxes.length) return
// if the user is not at end then return
if (!atEnd()) return
// If everything is right load some more boxes
for (i = start; i < start + newboxes; i++) {
boxes[i].classList.remove('hidden')
}
start += newboxes
})

/*Box Wrapper Design*/
.boxWrapper {
width: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 2em;
grid-row-gap: 5em;
margin-top: 120px;
}
.boxWrapper .box {
background-color: rgb(241, 240, 240);
width: 300px;
height: 355px;
margin: 0 auto;
text-align: center;
}
.boxWrapper .box img {
width: 100%;
height: 84.5%;
}
.boxWrapper .box a {
font-size: 22px;
font-weight: normal;
}
.boxWrapper .box p {
font-family: "Lato", sans-serif;
font-weight: bold;
font-size: 18px;
color: rgb(22, 22, 22);
}
.hidden {
display: none;
}

<div class="boxWrapper">
<div class="box" id="box1">
<a href="/characters/character1.html">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png" />
<p>Character 1</p>
</a>
</div>
<div class="box" id="box2">
<a href="/characters/character1.html">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png" />
<p>Character 2</p>
</a>
</div>
<div class="box" id="box3">
<a href="/characters/character1.html">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png" />
<p>Character 3</p>
</a>
</div>
<div class="box" id="box4">
<a href="/characters/character1.html">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png" />
<p>Character 4</p>
</a>
</div>
<div class="box" id="box5">
<a href="/characters/character1.html">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png" />
<p>Character 5</p>
</a>
</div>
<div class="box" id="box6">
<a href="/characters/character1.html">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png" />
<p>Character 6</p>
</a>
</div>
<div class="box" id="box7">
<a href="/characters/character1.html">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png" />
<p>Character 7</p>
</a>
</div>
<div class="box" id="box8">
<a href="/characters/character1.html">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png" />
<p>Character 8</p>
</a>
</div>
<div class="box" id="box9">
<a href="/characters/character1.html">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png" />
<p>Character 9</p>
</a>
</div>
<div class="box" id="box10">
<a href="/characters/character1.html">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png" />
<p>Character 10</p>
</a>
</div>
<div class="box" id="box11">
<a href="/characters/character1.html">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png" />
<p>Character 11</p>
</a>
</div>
<div class="box" id="box12">
<a href="/characters/character1.html">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png" />
<p>Character 12</p>
</a>
</div>
</div>