I've been trying to build an infinite scroll blog carousel. I found a tutorial and followed it. Even watched it again to double-check that the code was correct but I keep getting an error in the console which I do not know how to fix.
Here's the code
var infinateScroll = document.querySelectorAll(".infinate-scroll");
var infinateScrollItems = document.querySelectorAll(".infinate-scroll .iscroll-item");
let clones = [];
let disableScroll = false;
let scrollWidth = 0;
let scrollPosition = 0;
let clonesWidth = 0;
function getScrollPosition() {
return infinateScroll.scrollLeft;
}
function setScrollPosition(e) {
infinateScroll.scrollLeft = e;
}
function getClonesWidth() {
clonesWidth = 0;
clones.forEach(clone => {
clonesWidth += clone.offsetWidth;
});
return clonesWidth;
}
function reCalc() {
scrollPosition = getScrollPosition();
scrollWidth = infinateScroll.scrollWidth;
clonesWidth = getClonesWidth();
if(scrollPosition <= 0) {
setScrollPosition(1);
}
}
function scrollUpdate() {
if(!disableScroll) {
scrollPosition = getScrollPosition();
if(clonesWidth + scrollPosition >= scrollWidth) {
setScrollPosition(1);
disableScroll = true;
}
else if (scrollPosition <= 0) {
setScrollPosition(scrollWidth - clonesWidth);
disableScroll = true;
}
}
if(disableScroll) {
window.setTimeout(() => {
disableScroll = false;
}, 40);
}
}
function onLoad() {
infinateScrollItems.forEach(ScrollItem => {
const cloneItems = ScrollItem.cloneNode(true);
infinateScroll.appendChild(cloneItems);
cloneItems.classList.add('js-clone');
});
clones = infinateScroll.querySelectorAll('.js-clones');
reCalc();
infinateScroll.addEventListener('scroll', () => {
window.requestAnimationFrame(scrollUpdate);
}, false);
window.addEventListener('resize', () => {
window.requestAnimationFrame(reCalc);
}, false);
}
window.onload = onLoad();
The error I'm getting is for this line of code; infinateScroll.appendChild(cloneItems);
The error says "infinateScroll.appendChild is not a function" and I don't know what I need to do or change to fix the issue. Any help on the matter would be very helpful. Thanks
when using .querySelectorAll, you should receive a nodeList as array as result. https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
So you need to use the first item of infinateScroll, by using the array accessor [].
var infinateScroll = document.querySelectorAll(".infinate-scroll")[0];
alternatively, use querySelector() which returns a single Element object https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
var infinateScroll = document.querySelector('.infinate-scroll');