How to apply infinite scroll in builder

Visual Editor Help
1

Hey @manish-sharma

I have created this blogs list and i am rendering it multiple time by Repeat for each, i mean it show casing that it only showing 1 blog in layers but rendering multiple blogs on the page now i wanna apply infinite scroll to this how can i apply it.

image
image1919×919 201 KB

i was trying to update the JSX code from builder in code section to implement the infinite scroll but it just make the whole InputSearch disappear.

image
image730×849 39.9 KB

any kind of help would be appreciatable.

2

@manish-sharma can you please help me in this ??

3

Hello @Shami,

Can you help with the builder content link where we can test this?

4

there you go

5

Hello @Shami,

Just to clarify you want to add vertical infinite scrolling to blogs list?

6

Yes I do want to add an infinite scroll here

7

Hello @Shami,

Regrettably, because you are developing locally, I can’t figure out how to implement vertical scrolling specifically for your use case, however, below is a sample javascript snippet that can be used to add the vertical scrolling feature to HTML blocks

    const content = document.getElementById("content");

    // Function to load more items
    function loadMoreItems() {
        for (let i = 0; i < 10; i++) {
            const newItem = document.createElement("div");
            newItem.classList.add("item");
            newItem.textContent = "Item " + (content.children.length + 1);
            content.appendChild(newItem);
        }
    }

    // Initial load of items
    loadMoreItems();

    // Load more items when user scrolls to the bottom
    window.addEventListener("scroll", function () {
        if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
            loadMoreItems();
        }
    });