рассчитать scrollY и высоту элемента контейнера - PullRequest
Новая
       23

рассчитать scrollY и высоту элемента контейнера

2 голосов
/ 21 марта 2019

В Angular JS 1.6 (я знаю, что оно старое - устаревшее программное обеспечение) я хочу симулировать бесконечную прокрутку продукта.Если пользователь прокручивает до конца все перечисленные продукты, вызывается следующий API-интерфейс разбивки на страницы и элементы добавляются в массив products.

ПРИМЕЧАНИЕ: div, который я пытаюсь выполнитьвыполнить эти расчеты на это шаблон элемента директивы

TL; DR: два вопроса:

1) Мне нужно рассчитать height элемента контейнера

2) Мне нужен scrollY элемента контейнера, а не окна $

Проверка, выполнил ли пользователь прокрутку до последней строкиколичество отображаемых продуктов должно быть рассчитано следующим образом:

1) получение высоты элемента контейнера, содержащего все продукты (назовем элемент контейнера .products-container)

2) Проверьте, если $(.products-container).scrollY> $(.products-container).height

К сожалению, я не могу получить scrollY или height из $(.products-container), так как его высота рассчитывается количеством элементов внутри.

Так что я 'мы были вынуждены вычислить высоту $(.products-container) как сумму высот строк элементов inside it:

1) получение высоты отдельного элемента продукта (300px)

2) получение количества рядов продуктов (3 продукта в строке)

3) получениевысота прокси элемента контейнера, содержащего все продукты (назовем элемент контейнера .products-container) как сумму из всех строк элемента продукта внутри него

4) Проверьте, если $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
}

Проблемы:

1) height вычисляемого элемента контейнера всегда 0

2) I onlyпохоже, что можно получить scrollY окна: 

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

scrollY для таргетированного вычисляемого элемента контейнера всегда 0.

Примечание: $('.products-container').height(), document.getElementById('#products-container').clientHeight и т. Д. Все дают 0,

...