时间戳

首页 > 解决方案 > 带有 html 内容的无限滚动条

javascript - 带有 html 内容的无限滚动条

问题描述

我看过很多解释如何做无限滚动的视频，但所有这些视频都需要一个数据库来加载然后显示一些内容。难道不能使用我已经在 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>

标签： javascripthtmlcss

解决方案

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>

推荐阅读