I am trying to make the infinite scrolling in HTML, lets says I have a preloaded list of products from Server and the products details will be display on the web page.
Can you help me to make the function that can make the list of display will not show all at the beginning. And show more item when user scrolling down at the end of current loaded items.
Here is one of the product details UI for your reference.
<div class="col-6 product-grid aos-init aos-animate" data-aos="fade-up" data-aos-duration="200">
                            <div class="product-card h-100 rounded-16 position-relative transition-2" style="padding: 0px !important;">
                                <div class="product-card__thumb rounded-8 position-relative">
                                    <!-- "https://yymart.com.hk/products/details/測試電子產品" -->
                                    <a href="https://yymart.com.hk/products/details/測試電子產品" class="w-100 h-100 flex-center"> 
                                        <img src="https://yymart.com.hk/uploads/media/2025/thumb-sm/temp_product.png" alt="" class="w-auto rounded-8">
                                    </a>
                                    <!--
                                    <div class="position-absolute inset-block-start-0 inset-inline-start-0 mt-16 ms-16 z-1 d-flex flex-column gap-8">
                                        <span class="text-main-two-600 w-40 h-40 d-flex justify-content-center align-items-center bg-white rounded-circle shadow-sm text-xs fw-semibold">-29%</span>
                                        <span class="text-neutral-600 w-40 h-40 d-flex justify-content-center align-items-center bg-white rounded-circle shadow-sm text-xs fw-semibold">HOT</span>
                                    </div>
                                    -->
    
                                    <div class="expand-btn-container bg-white p-2 rounded-pill z-1 position-absolute inset-inline-end-0 inset-block-start-0 me-16 mt-16 shadow-sm">
                                        <button type="button" class="expand-btn w-40 h-40 text-md d-flex justify-content-center align-items-center rounded-circle hover-bg-main-two-600 hover-text-white">
                                            <i class="ph ph-plus"></i>
                                        </button>
                                        <div class="expand-icons gap-20 my-20">
                                            <button type="button" class="text-neutral-600 text-xl flex-center hover-text-main-two-600 wishlist-btn">
                                                <i class="ph ph-heart"></i>
                                            </button>
                                            <button type="button" class="text-neutral-600 text-xl flex-center hover-text-main-two-600">
                                                <i class="ph ph-eye"></i>
                                            </button>
                                            <button type="button" class="text-neutral-600 text-xl flex-center hover-text-main-two-600">
                                                <i class="ph ph-shuffle"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <!--
                                    <div class="countdown position-absolute start-50 inset-block-end-0 mb-20 translate-middle-x w-100" id="countdown12">
                                        <ul class="countdown-list style-four flex-center flex-wrap gap-8">
                                            <li class="countdown-list__item flex-align flex-column text-sm fw-medium text-white rounded-lg bg-neutral-600">
                                                <span class="days text-2xl text-main-two-600 fw-medium"></span>Days
                                            </li>
                                            <li class="countdown-list__item flex-align flex-column text-sm fw-medium text-white rounded-lg bg-neutral-600">
                                                <span class="hours text-2xl text-main-two-600 fw-medium"></span>Hour
                                            </li>
                                            <li class="countdown-list__item flex-align flex-column text-sm fw-medium text-white rounded-lg bg-neutral-600">
                                                <span class="minutes text-2xl text-main-two-600 fw-medium"></span>Min
                                            </li>
                                            <li class="countdown-list__item flex-align flex-column text-sm fw-medium text-white rounded-lg bg-neutral-600">
                                                <span class="seconds text-2xl text-main-two-600 fw-medium"></span>Sec
                                            </li>
                                        </ul>
                                    </div>
                                    -->
                                </div>
                                <div class="product-card__content w-100">
                                    <div class="product-card-tags">
                                                                            </div>
                                    <h6 class="title text-lg fw-semibold" style="margin-bottom: 0px !important;">
                                        <a href="https://yymart.com.hk/products/details/測試電子產品" class="link text-line-2" tabindex="0">測試電子產品</a>
                                    </h6>
                                    <!--
                                    <div class="flex-align gap-6">
                                        <div class="flex-align gap-8">
                                            <span class="text-15 fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                            <span class="text-15 fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                            <span class="text-15 fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                            <span class="text-15 fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                            <span class="text-15 fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                        </div>
                                        <span class="text-xs fw-medium text-gray-500">4.8</span>
                                        <span class="text-xs fw-medium text-gray-500">(12K)</span>
                                    </div>
                                    -->

                                    <span class="py-2 px-8 text-xs rounded-pill text-main-two-600 bg-main-two-50 mt-4"><a href="https://yymart.com.hk/products/category/手機">手機</a></span>

    
                                    <span class="py-2 px-8 text-xs rounded-pill text-main-two-600 bg-main-two-50 mt-4"><a href="https://yymart.com.hk/sellers/seller_details/test">由網上商店提供</a></span>
    
                                    <div class="product-card__price mt-4 mb-4">
                                                                                <span class="text-heading text-md fw-semibold ">HK$100.00 <span class="text-gray-500 fw-normal"></span></span>
                                    </div>
                                    <!--
                                    <a href="#" class="add_to_cart product-card__cart btn bg-gray-50 text-heading hover-bg-main-600 hover-text-white py-11 px-24 rounded-8 flex-center gap-8 fw-medium" data-product-id="12" data-product-variant-id="12" data-product-title="測試電子產品" data-product-image="https://yymart.com.hk/uploads/media/2025/temp_product.png" data-product-price="100" data-min="1" data-step="1" data-product-description="" data-izimodal-open="">
                                        加至購物車 <i class="ph ph-shopping-cart"></i> 
                                    </a>
                                    -->
                                </div>
                            </div>
                        </div>