CODEWITHSUNDEEP
javascriptsmooth-scrollinghidden-field
DrPaulVella
DrPaulVella

Reputation: 449

Make all grid children visible in JavaScript

I have a website with a grid item that reveals hidden children as the page is scrolled (i.e., scroll down and see more images).

I am trying to grab the text (video views) related to each image and put it in an array. This works fine for the images currently on screen, but not for the hidden ones.

For example,

const allVideoCountEl = Array.from(document.querySelectorAll(".DivItemContainerV2 .video-count"));

var a = [];
allVideoCountEl.forEach(videoCountEl => {
  a.push(videoCountEl.innerText);
})

will tell me there are 70 items, but if I actually scroll to the bottom of the page there are 690 items.

How can I modify this to grab all 690 items without manually scrolling down the page?

Upvotes: 0

Views: 29

Answers (1)

DrPaulVella
DrPaulVella

Reputation: 449

It wasn't hidden grid elements in the end, it was infinite scroll. The solution was to scroll to the bottom, wait a few seconds and scroll again:

window.scroll(0, 10000000);

setTimeout(() => {
  window.scroll(0, 10000000);
}, 3000);

setTimeout(() => {
  window.scroll(0, 10000000);
}, 5000);

Upvotes: 0

Related Questions