Stop scrolling at 'whole' row position of ion-item

Ionic Framework ionic-v3
1

Hi,

I am using ion-item to display a list of text wrapped in an ion-list element.

However, I want:
When the user swipe up or down, instead of stopping at where the swipe stops, the list can itself slide up or down to the closest item. In another word, there is always an entire ion-item displayed at top of the ion-list.

Example:

  1. Before swiping, the screen displays item 3, 4, 5, 6 (like illustrated below)
  2. Then user swipes up so the list scrolls down.
  3. After swiping, only portion of item 5 stops at top border of screen.
  4. Now the list itself should slide down by itself until the entire item 5 shows. Thus the ‘whole’ item 5 row appears as the first item in the screen.

.
.
.
— screen top border—

ITEM 3

ITEM 4

ITEM 5

ITEM 6

— screen bottoom border—
.
.

  <ion-list>
        <ion-item *ngFor="let item of items;" text-wrap>
  </ion-list>
2

I am afraid, not really. Any more code references or image/s might help.

3

I tried to give an example, please check.

4

It seems better now, thanks. I’ve to leave right now though and I’ll be back later, hopefully someone will chip in with a solution. I’ll check it out too. Cheers :+1:

5

Hm, I think I understand what you are trying to achieve. But, unfortunately I haven’t had the need to deal with this before so I am not sure how to go about it. Perhaps, you can take a look at the VirtualScroll component and adapt it to your needs? Or, you might try to do it manually by somehow aligning the top of the topmost item with the top of the item container, not sure how though. May be someone else can help.

6

Thanks KishuPro for looking back.

It is OK, I was just wondering if Ionic has this out-of-box or an ionic way to tweak.

1 Like
7

Hey, you might wanna take a look here scrollToTop, perhaps you can find something useful :slight_smile: