KPC
Kevin Powell - Community•2mo ago
Gulian

Infinite carousel gets stuck when scrolling too fast

I've been working on this draggable/scrollable infinite carousel for a few hours but I ran into an issue. It seems like whenever my if statements hits within infiniteScroll, and the user scrolls 'too fast', the if statement triggers again before carousel.scrollLeft() has updated, causing the carousel.scrollLeft() to get overwritten. I've attached a screenshot showing the values of carousel.scrollLeft(), where we can see that it 'teleports' back and forth a couple of times, causing it to get stuck. How could I prevent this from happening? This problem occurs more often when using shift + scrolling (horizontal scrolling) https://codepen.io/Gulian256/pen/GgRrLeJ PS This is my first post here, any feedback to make the post/question clearer would be appreciated!
Julian
CodePen
Untitled
...
No description
4 Replies
clevermissfox
clevermissfox•2mo ago
Welcome ! There is some helpful information in #how-to-ask-good-questions for posting in the help channels. The most important part is providing your project in a live environment whenever possible, preferably a minimal reproduction that highlights your problem without including a bunch of code that has nothing to do with the issue. Adding your code in a codepen would be the best course of action as it makes it much easier for any helpers to click in and easily click around and test changes- therefore more likely that you'll get help as otherwise someone has download each file, open in a text editor and setup a dev server to be able to get to your code. If you're not familiar with code pen , you just copy everything in between your <body> tags I to the HTML drawer, then paste all the CSS into the css drawer, same with Javascript. Once rhe code is there, press the save button and paste in the link to that pen and post it here!
CodePen
CodePen - Create a New Pen
...
Gulian
GulianOP•2mo ago
Thanks, I've updated my post.
RoseMakh
RoseMakh•2mo ago
I don't know if I fixed it completely but it works quite smoothly for me if the scroll listener is turned off before snapping the carousel to the start and end positions, then added back onto the carousel after snapping: 
infiniteScroll = () => {
    if (carousel.scrollLeft() <= scrollTriggerStart) {
        carousel.addClass('no-transition');
        carousel.off('scroll');
        carousel.scrollLeft(seamlessPosEnd);
       carousel.removeClass('no-transition');
       carousel.on('scroll', infiniteScroll);
    } else if (carousel.scrollLeft() >= scrollTriggerEnd) {
        carousel.addClass('no-transition');
        carousel.off('scroll');
        carousel.scrollLeft(seamlessPosStart);
        carousel.removeClass('no-transition');
        carousel.on('scroll', infiniteScroll);
    }
}
infiniteScroll = () => {
    if (carousel.scrollLeft() <= scrollTriggerStart) {
        carousel.addClass('no-transition');
        carousel.off('scroll');
        carousel.scrollLeft(seamlessPosEnd);
       carousel.removeClass('no-transition');
       carousel.on('scroll', infiniteScroll);
    } else if (carousel.scrollLeft() >= scrollTriggerEnd) {
        carousel.addClass('no-transition');
        carousel.off('scroll');
        carousel.scrollLeft(seamlessPosStart);
        carousel.removeClass('no-transition');
        carousel.on('scroll', infiniteScroll);
    }
}
It still gets "stuck" but not as often. That's the most help I can offer for now.
Chris Bolson
Chris Bolson•2mo ago
I haven't looked too closely at the code but you might want to try adding a debounce function to prevent the infiniteScroll function from being called too often

Did you find this page helpful?