# How to apply infinite scroll in builder

**URL:** <https://forum.builder.io/t/how-to-apply-infinite-scroll-in-builder/5102>\
**Category:** Visual Editor Help\
**Tags:** nextjs\
**Created:** [March 5, 2024, 2:03pm UTC](https://forum.builder.io/t/how-to-apply-infinite-scroll-in-builder/5102 "2024-03-05T14:03:33Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Shami](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/shami/32/3188_2.png) [@Shami](https://forum.builder.io/u/Shami)\
**Post date:** [March 5, 2024, 2:03pm UTC](https://forum.builder.io/t/how-to-apply-infinite-scroll-in-builder/5102/1 "2024-03-05T14:03:33Z")

</div>

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](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/6/6e74a62d779a09553d78278fd4b4d39e55b52c92.jpeg)

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](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/6/6373f4d6cf64b26caf11944f64f8b1a2661aeab4.png)

any kind of help would be appreciatable.

---

<div class="post-metadata">

**Author:** ![Shami](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/shami/32/3188_2.png) [@Shami](https://forum.builder.io/u/Shami)\
**Post date:** [March 6, 2024, 7:58am UTC](https://forum.builder.io/t/how-to-apply-infinite-scroll-in-builder/5102/2 "2024-03-06T07:58:45Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [March 6, 2024, 10:28am UTC](https://forum.builder.io/t/how-to-apply-infinite-scroll-in-builder/5102/3 "2024-03-06T10:28:14Z")

</div>

Hello @Shami,

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

---

<div class="post-metadata">

**Author:** ![Shami](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/shami/32/3188_2.png) [@Shami](https://forum.builder.io/u/Shami)\
**Post date:** [March 6, 2024, 10:54am UTC](https://forum.builder.io/t/how-to-apply-infinite-scroll-in-builder/5102/4 "2024-03-06T10:54:22Z")

</div>

> **[Builder.io: Visual Development Platform](https://builder.io/content/5e43fa3c97c3470196b500e463cf844c)**
>
> Drag and drop with your components, right within your existing site or app. Build and optimize digital experiences for any tech stack, visually..

there you go

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [March 6, 2024, 10:59am UTC](https://forum.builder.io/t/how-to-apply-infinite-scroll-in-builder/5102/5 "2024-03-06T10:59:29Z")

</div>

Hello @Shami,

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

---

<div class="post-metadata">

**Author:** ![Shami](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/shami/32/3188_2.png) [@Shami](https://forum.builder.io/u/Shami)\
**Post date:** [March 6, 2024, 11:29am UTC](https://forum.builder.io/t/how-to-apply-infinite-scroll-in-builder/5102/6 "2024-03-06T11:29:59Z")

</div>

Yes I do want to add an infinite scroll here

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [March 6, 2024, 11:54am UTC](https://forum.builder.io/t/how-to-apply-infinite-scroll-in-builder/5102/7 "2024-03-06T11:54:54Z")

</div>

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

```auto
    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();
        }
    });

```