아래로 스크롤시 컨텐츠 목록에 생성되는 간단 무한스크롤 예시이다.
스크롤시 스크롤을 한번을 내려도 두번 발생하기 때문에 스크롤 체크 변수 didScroll를 먼저 선언해 주어야 한다.

css

#productBeforeList {
    height: 600px; 
    border: 1px solid blue;
}
#productScroll {
    height: 200px;
    border: 1px solid red;
}
#productScroll::after {
    content: ''; 
    clear: both; 
    display: table;
}
.product-item {
    float: left; 
    width: 25%; 
    height: 50px; 
    text-align: center; 
    background-color: lightgray; 
    box-sizing: border-box;
}

html

<div id="productBeforeList"></div><!-- 이전 상위 컨텐츠 목록 -->
<div id="productScroll"></div>

js

$(function() {

    // 스크롤 감지
    var didScroll = false;

    $(window).on('scroll', function() { didScroll = true; });

    setInterval(function() {
        var bottomHeight = $(window).scrollTop() + $(window).height() + 600;
        var docHeight = $(document).height();

        if (didScroll) {
            didScroll = false;
            if (bottomHeight > docHeight) infiniteScrollContent();
        }
    }, 250);

    function infiniteScrollContent() {

        var scrollcon = '';
        for (var k = 0; k < 4; k++) {
            scrollcon += '<div class="product-item"><strong>상품이름</strong></div>';
        }            
        $("#productScroll").append(scrollcon);
    }
});