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
,