0

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

Jason_C
  • 41
  • 5

1 Answers1

0

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');
This Guy
  • 495
  • 4
  • 9
  • Thank you. That has worked and fixed the error I was having. However, now a new problem has appeared. The function is working and creating the clone elements, but it's not infinitely looping through the items like it should create an infinite slider. The only thing I can think of which I did differently to the video is, I used scollLeft and offsetWidth, instead of scrollTop and offsetHeight. But I thought that would be correct since my slider scrolls left and right instead of up and down. If you got any ideas to help I'd really appreciate it. Thanks. – Jason_C Jan 30 '23 at 18:27