Ionic: get currently visible elements in ionic content

Question

In my application, a long scrollable ion-content region filled with elements using collection-repeat .

I need to know which items are visible to the user.

I can not use $ionicScrollDelegate.getScrollPosition to calculate the answer, because each element has a different height (the height of the element is calculated per element).

Answer 1

The calculation of the summed heights of the elements themselves has finished and by requesting the translateY value of the .scroll element, I can find out which element is in the visible part of the scroll.

He invents the wheel, but works.

When I load elements, I call ScrollManager.setItemHeights(heights) ( heights is an array of element heights in pixels) and to get the index of the current visible element: ScrollManager.getVisibleItemIndex()

 angular.module("services") .service('ScrollManager', function() { var getTranslateY, getVisibleItemIndex, setItemHeights, summedHeights; summedHeights = null; setItemHeights = function(heights) { var height, sum, _i, _len; summedHeights = [0]; sum = 0; for (_i = 0, _len = heights.length; _i < _len; _i++) { height = heights[_i]; sum += height; summedHeights.push(sum); } }; // returns the style translateY of the .scroll element, in pixels getTranslateY = function() { return Number(document.querySelector('.scroll').style.transform.match(/,\s*(-?\d+\.?\d*)\s*/)[1]); }; getVisibleItemIndex = function() { var i, y; y = -getTranslateY(); i = 0; while (summedHeights[i] < y) { i++; } return i; }; return { setItemHeights: setItemHeights, getVisibleItemIndex: getVisibleItemIndex }; });