Styjun

In Angular JS 1.6 (I know it's old— Legacy software), I want to simulate infinite product scrolling. If the user scrolls to the bottom of all the products listed, the next pagination API is called and the elements are appended to the products array.

NOTE: the div I'm trying to perform these calculations on is a directive template element

TL;DR: Two questions:

1) I need the calculated height of the container element

2) I need the scrollY of the container element, NOT of the $window

Checking if the user scrolled to last row of products displayed should be calculated by:

1) getting height of container element containing all products (let's call the container element .products-container)

2) Check if $(.products-container).scrollY > $(.products-container).height

Unfortunately, I cannot seem to get the scrollY or height of $(.products-container) as its height is calculated by the number of elements inside.

So I've been forced to calculate height of $(.products-container) as a sum of the heights of rows of elements inside it:

1) getting height of an individual product element (300px)

2) getting number of rows of products (3 products per row)

3) getting proxy height of container element containing all products (let's call the container element .products-container) as a sum from all the product element rows inside it

4) Check if $window.scrollY > numberOfRows * productElementHeight

let productElement = $('.product-item');
let productElementHeight = productElement.height();
let numberOfRows = Math.ceil(scope.products.length/productsDisplayedPerRow);
let heightOfPageToLastElement = numberOfRows * productElementHeight;

if (newScrollHeight > heightOfPageToLastElement) 
 // append next set of product results

The problems are:

1) The height of a calculated container element is always 0

2) I only seem to be able to get the scrollY of the window:

$scope.$watch(function () 
 return $window.scrollY;
, function (scrollY) 
 $rootScope.scrollHeight = scrollY;
);

scrollY targeting a calculated container element is always 0.

Note: $('.products-container').height(), document.getElementById('#products-container').clientHeight, etc all yield 0,