0

I've seen a lot of videos explaining how to do an infinite scroller, but all of them require a database to load and then show some content. Isn't it possible to do an infinite scroller using the divisions I already have designed on HTML?

To make it more clear here is a code with some boxes in it: https://jsfiddle.net/hugot1944/0fbuvsrz/10/

Isn't it possible to make an infinite scroller with these divisions tagged as boxes? Can't I initially show, let's say, from the box with the ID box1 to box6, and then whenever a user scrolls show another 6 divisions?

Here is the code of the divisions I'm talking about:

/*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>
Amal nandan
  • 932
  • 6
  • 17
Hugo
  • 1

3 Answers3

0

First you need to understand the concept of scroll, "scroll (on the webpage) only happens when the content of your site is more than the viewport height.And one can only scroll till he/she reaches the end of the content on the particular page" .

Now, in your case the data is static, you have divs, which ultimately takes their respective heights and finally once a user scrolls to the last div, that's it. Since no further content/data, No scroll.

So, a straight forward answer is with the above static setup, it is not possible to have an infinite scroll. For Infinite scroll, we must have data loaded from the Backend API as the user scrolls to the bottom of the page.

Imran Rafiq Rather
  • 7,677
  • 1
  • 16
  • 35
  • Right, this goes only for infinite scroll, or is it the same with a load more button that has the same objective in mind? (the only difference would be the need to click in the button instead of the scroll event) – Hugo Aug 12 '21 at 13:58
0

I have created a sample for you hope it helps.

// 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>
X999
  • 450
  • 3
  • 15
0

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>
Keshav Bajaj
  • 863
  • 1
  • 5
  • 13