.scroll jquery -3.6.1.min не работает для

блока

Делал подгрузку изображений c jquery-3.6.1.min

<script>

let block_show = false;

function scrollMore()
{
    let $target = $("#showmore-triger");
    
    if (block_show) 
    {
        return false;
    }
 
    let wt = $(".prod-list").scrollTop();
    let wh = $(".prod-list").height();
    let et = $target.prop("offsetTop");
    let eh = $target.outerHeight();
    let dh = $(".prod-list").prop("scrollHeight");
 
    if (wt + wh >= et || wh + wt == dh || eh + et < wh)
    {
        let page = $target.attr("data-page");
        page++;
        block_show = true;

        $.ajax
        ({ 
            url: "https://new.xn--h1alaavy.xn--p1ai/zayavka/modules/ajax.php?page=" + page,  
            dataType: "html",
            success: function(data)
            {
                $("#showmore-list .prod-list").append(data);
                block_show = false;
            }
        });
 
        $target.attr("data-page", page);
        if (page ==  $target.attr("data-max")) 
        {
            $target.remove();
        }
    }
}

$(window).scroll( function(){
    scrollMore();
});



        $(document).ready(function(){
            scrollMore();
            console.log("ready");
        });
        
</script>

скрипт работает если писать $(window).scroll( function(){scrollMore();}) если же вместо окна просмотра (Window) писать $(".prod-list").scroll( function(){scrollMore();}) то ничего не работает ( видимо не видит тот самый скрол блока c классом prod-list)

html код примитивен

<div id="showmore-list">
<div class="prod-list" >
... тут много дивов с сервера... 
<footer id="showmore-triger" data-page="1" data-max="'.$amt.'"> <img src="/img/loader/ajax-loader.gif" alt="" width="18px"> </footer> 
  </div> 
</div>

css стили если нужны

#showmore-triger {
    text-align: center;
    padding: 2px;
    background: #ffdfdf;
    margin-left: 5px;
    width: 95%;
    float: left;
    margin-left: 10px;
    height: 20px;
}

.prod-list {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 200px;
    position: relative;

}
.prod-item {
    float: left;
    margin-left: 11px ;
}
.prod-item-img {
    width: 100%;
    border:1px solid black;
}

ВОПРОС) почему не работает $(".prod-list").scroll( function(){scrollMore();});