CODEWITHSUNDEEP
jquerycss
Ben
Ben

Reputation: 39

How can we make it infinite scrollable?

I came through a Codepen here where this cool menu is displayed. I tried my best to customize it but i was not able to make it infinitely scrollable. ( When I scroll, the menu loops) here is the pen

https://codepen.io/dev_loop/pen/PoZBOBx Could you please help me. Thanks.

Demo of an Infinite Scroll Menu Demo

Upvotes: 1

Views: 184

Answers (1)

Frenchy
Frenchy

Reputation: 16997

UPDATE

so i wanted to see the possibility of locomotiveScroll, and in same time i have found a quick solution to your problem:

i have addded some lines in your scss: this lines reset the counter to 1

.resetcounter::before{
    counter-set: menucounter 1 ;
}

Solution Here: Infinite Scrolling

How the program is functional?

The logic i add a data-scroll-call="id" spy at element of middle of all menuitems (5nth here)

when the scroll down sees a spy (data-scroll-call="0" for example), its add new items (clone jQuery) to the container and increment id and i update the locomotiveScroll , and so on.

when the scroll up sees a spy, the program deletes all items of data-scroll-call with id + 2

The difficulty was to filter the messages which pollutes the event call whe n locomotiveScroll was updated to take new item spy

Upvotes: 2

Related Questions