Ionic：イオンコンテンツの現在表示されているアイテムを取得する

Question

を使用している項目で、長い、スクロール可能なion-contentエリアがアプリにあります。

どのアイテムがユーザーに表示されているかを知る必要があります。

各アイテムの高さが異なるため、答えを計算するのに$ionicScrollDelegate.getScrollPositionを使用できません（アイテムの高さはアイテムごとに計算されます）。

Answer 1

要素の合計高さの計算を終了し、.scroll要素のtranslateY値を照会すると、スクロールの目に見える部分にどの項目があるかがわかります。

これはホイールを再発明していますが、機能します。

iがアイテムをロードすると、私は（heightsピクセルのアイテムの高さの配列である）ScrollManager.setItemHeights(heights)を呼び出し、現在表示項目のインデックスを取得する：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 
    }; 
});