Estoy haciendo una modal de búsqueda de productos, en la cual tengo un div llamado ScrollProducts al que le he colocado un overflow-y: scroll, quiero saber cuando el scroll llega al final para ejecutar una función, ose al final del scroll de la modal.
aquí el código
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="button_exit">
<img (click)="closeModal()" data-dismiss="modal"
src="/assets/img/icons-25.svg" alt="">
</div>
<div class="oldContent">
<div class="col oldContentdiv">
<div class="form" *ngIf="retailer.active_retailer!==null && detalle === false && resumen === false">
<form (ngSubmit)="goSearch(query)" onsubmit="this.reset()">
<input id="search-bar" class="search-input" type="text" [(ngModel)]="query" [ngModelOptions]="{standalone: true}"
ngModel placeholder="Buscar reemplazo en {{retailer.retailer_active.name}}">
</form>
</div>
<div *ngIf="stocklist.searchQueryDataNewCart === null && !loading" class="carritoVacio">
<div class="imgCart">
<img src="assets/img/icons-34.svg" alt="">
</div>
<div class="">
<div class="title">¿Tu carrito está vacío?</div>
<div class="descrip">Al parecer no tienes items en tu carrito. Intenta buscar algunos productos para
poderlos añadir a tu compra.
</div>
<br>
</div>
</div>
<div *ngIf="stocklist.searchQueryDataNewCart === null && loading">
<div class="imgCartGif">
<img src="assets/img/spinner.gif" alt="">
</div>
</div>
<div *ngIf="stocklist.searchQueryDataNewCart !== null && detalle === false && resumen === false" class="conteinerGlobal">
<div class="headerSearch">
<div class="busqueda">
<strong>Palabra buscada: </strong> {{stocklist.searchQueryNewCart | uppercase}}
</div>
</div>
<div class="ScrollProducts" >
<div class="container_Productos" *ngIf="productosCount===false">
<div class="producto_wrapper animated fadeIn slide" *ngFor="let item of stocklist.searchQueryDataNewCart; let i = index;"
style="outline:none;" (mouseover)="mouseOver(item,i)" (mouseleave)="mouseLeave(item,i)" [ngClass]="{'borderActive':item.activeButton===true}"
style="cursor:pointer;">
<img src="{{item.product.cover[0].original}}" (click)="verProd(i, item)" data-toggle="modal"
data-target="#verProducto" data-backdrop="false">
<div class="costado" *ngIf="item.activeLike === true" id="{{i}}">
<div [ngClass]="{'icon heart_off' : item.favoritos===false , 'icon heart_on' : item.favoritos===true}"
(click)="addFavorites(item,item.favoritos)">
</div>
</div>
<div class="title" badge-style="badge-assertive" (click)="verProd(i, item)" data-toggle="modal"
data-target="#verProducto" data-backdrop="false">
{{item.product.name}}
</div>
<div class="info" (click)="verProd(i, item)" data-toggle="modal" data-target="#verProducto"
data-backdrop="false">
<span class="price">${{item.price}}</span>
<div class="unit">{{ util.formatUnitQuantity(item.product.unit, item.product.quantity) }}</div>
<span class="incart" *ngIf="cartItem.cartitems.count(item) > 0">
{{cartItem.cartitems.count(item)}}
</span>
</div>
<button *ngIf="item.activeButton === true" id="{{i}}" class="btnCompra" (click)="compraVista(item, cartItem.cartitems.count(item))"
style="cursor:pointer;">
Agregar al carrito
</button>
</div>
</div>
<div class="container_Productos" *ngIf="productosCount===true">
<div class="producto_wrapper animated fadeIn slide" *ngFor="let item of stocklist.searchQueryDataNewCart; let i = index;"
style="outline:none;" (mouseleave)="mouseLeave(item,i)" [ngClass]="{'borderActive':item.activeButtonCount===true, 'borderActive':item.activeButtonRemove===true}"
style="cursor:pointer;">
<img src="{{item.product.cover[0].original}}">
<div class="costado" *ngIf="item.activeLike === true" id="{{i}}">
<div [ngClass]="{'icon heart_off' : item.favoritos===false , 'icon heart_on' : item.favoritos===true}"
(click)="addFavorites(item,item.favoritos)">
</div>
</div>
<div class="title" badge-style="badge-assertive">
{{item.product.name}}
</div>
<div class="info">
<span class="price">${{item.price}}</span>
<div class="unit">{{ util.formatUnitQuantity(item.product.unit, item.product.quantity) }}</div>
<span class="incart" *ngIf="item.countOver > 0">
{{item.countOver}}
</span>
</div>
<div class="acciones_bulk" *ngIf="item.activeButtonCount === true">
<button class="acciones-button less" (click)="decrement(item,item.countOver)" style="cursor:pointer;">-</button>
<span class="count">{{item.countOver}}</span>
<button class="acciones-button more" (click)="increment(item,item.countOver)" style="cursor:pointer;">+</button>
</div>
<button *ngIf="item.activeButtonRemove === true" id="{{i}}" class="btnCompraRemove" (click)="removeItem(item)">
Remover Producto
</button>
</div>
</div>
<div class="search-results" infiniteScroll [infiniteScrollDistance]="4" [infiniteScrollThrottle]="500"
(scrolled)="loadMore()" [scrollWindow]="true" *ngIf="stocklist.scrolledNewCart===true">
<img src="../assets/img/spinner.gif">
</div>
</div>
</div>
<button *ngIf="this.cartItem.cartGet().items.length === 0 && stocklist.searchQueryDataNewCart !== null" class="btn_Naranja blockButton"
disabled>
Comprar
</button>
<button *ngIf="this.cartItem.cartGet().items.length > 0 && banderaResumen === true" class="btn_Naranja" (click)="gotoPayment()">
Comprar
</button>
<button *ngIf="detalle === true && resumen === false" class="btn_Naranja_detalle" (click)="checkCompra()">
Comprar
</button>
</div>
</div>
Como puedo saber cuando el usuario ha llegado al final del scroll de la modal?