Infinite scroll is visible

Ionic Framework ionic-v3
1

Is there a way to show what item is visible in infinite scroll?

2

Not really as the data normally is not even loaded yet. Also infinite scroll, the loading of the data to be precise, is triggered before you even reach the bottom (but that can possibly be deactivated).

What is you use case?

3

Thanks for the quick reply. Maybe I didn’t explain that too well, it will be after the first 10 are loaded, 2 are on screen and 8 are off. As they scroll I need to see what ones they saw.

Basically it’s scrolling cards like twitter/facebook, I want to fire an event when the user has seen the card so I can compare view vs click.

Thanks.

4

Ah ok.

Are we talking about a) infiniteScroll doInfinite invocations then? You can do in there whatever you want.
Or b) does your list have 10 items by default, user saw 2 of them but 8 not. (If they had seen 10 it would have loaded 10 more) Then this is unrelated to infinite Scroll.

5

Yes, the doInfinite. There are more than 10, it just loads 10 at a time. I just need to get the indexes of them as the users see’s them.

Thanks.

6

Maybe you can inject an html5 class to each record by Angular means?
Something like <p class="stuff" data-record-id="2">stuff</p>
And then grab it to help with pagination.

1 Like
7

Yeah it may be unrelated to infinite scroll, just need the index of the item when it appears on screen.

8

Thanks for the reply. I can that way but I’m still not sure how to tell when it’s visible.
<ion-card *ngFor=“let article of articles; let i = index” [attr.data-index]=“i”>

9

Best create a new topic to ask how you can find out if an element was visible or not.

10

I’ll do that, thank you.

11

I figured out how to check for the element. Any Idea how to call a function as you scroll with infiinite scroll? Is there a scroll even listener?

12

Situation is a bit confusing as this changed multiple times over the betas and RCs, but here is something: https://ionicframework.com/docs/api/components/content/Content/#advanced

1 Like
13

Yeah that is exactly what I need in that link, just hopefully I can get that to work with infinite scroll.

Thanks.

Keith

14

Thank you, that did work with infinite scroll and does exactly what I want.