排列列表项以获取离子值

Question

我有一个正在处理的离子项目，正在使用网格中的列，该列在左上角（X）包含静态图像，在右面（Y）包含图像列表。我想做的是能够在右侧列表中滚动，因此当X和Y图像在顶部对齐时，它会为我提供当前Y图像的ID。

我正在监视滚动，但是我不确定在混乱的情况下如何使用它，并确保它可以在多个设备上正常工作。

这些图形给出了我正在尝试实现的想法。有人知道我该怎么做吗？谢谢！

HTML代码

    <ion-content padding (ionScroll)="scrolling($event)" 
    (ionScrollEnd)="scrollComplete($event)">
<ion-grid>
  <ion-row>
    <ion-col col-12>
        <div id="player" class="box">   
          <img class="profilePicture" src="../../assets/imgs/X.jpg"> 
          <ul>
              <li class="blue box ScoreBox">132<br /></li>
              <li class="blue box ScoreBox">243<br /></li>
              <li class="blue box ScoreBox">233<br /></li>
          </ul>
        </div>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col col-12>
      <ion-list *ngFor="let item of listItems;let i = index">
          <ion-item id="{{ i }}" *ngIf="i == 0">            
              <img src="../../assets/imgs/Y.jpg"  class="spacer">
          </ion-item>
        <ion-item id="{{ i }}" *ngIf="i > 0">            
            <img src="../../assets/imgs/Y.jpg">
        </ion-item>
      </ion-list>
    </ion-col>
  </ion-row>
</ion-grid>
</ion-content>

TypeScript

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-two-columns',
  templateUrl: 'two-columns.html',
})
export class TwoColumnsPage {
  listItems = [];
  constructor(public navCtrl: NavController, public navParams: NavParams) {
    // Generate the number of list items for testing
    for (let i = 0; i < 30; i++) {
      this.listItems.push( this.listItems.length );
    }
  }

  scrolling(event) {
    // your content here for scrolling
    console.log(event);
  }

  scrollComplete(event) {
   // your content here of scroll is finished
   console.log(event);
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad TwoColumnsPage');
  }
}