$ionicScrollDelegate - Need help achieving snapping effect

ionic-v1
1

Hey,

I need help achieving a snapping effect on 3 vertical scrolls using ion-content with $ionicScrollDelegate.

I need this to act like the native alarm clock app on IOS or Android. The following screenshot is just a sample of what I need.

These 3 containers are seperate scolls. What I need, is that when i scroll vertically, the container needs to fully show the closest item in the scroll.

Think of it like a custom item selector.

I tried using $ionicScrollDelegate.getScrollPosition() which returns a number of how much the user has scrolled, but I failed to create the logic onScrollComplete to snap the item fully in place.

Can anyone help me with this?

Thanks.

2

You could use 3 different scroll delegates by setting

delegate-handle="delegate1"

etc. and then define

on-scroll-complete="onScroll1Complete()"

functions. There you can define conditions based on the delegate and the scroll position.

if (delegate.getScrollPosition().top < blockSize && delegate.getScrollPosition().top > 0) {
    delegate.scrollTo(0, blockSize, true);
}

You have to know the sizes of the blocks of course. You should add some additional conditions that check whether you are nearer to the top or the bottom of the row.

BUT: I found out that on scroll complete is not reliably fired at least on iOS devices. I’m investigating this bug at moment, that’s why I found your post … :wink:

3

Hey and thanks for the reply,

So delegate.getScrollPosition().top get the scroll position in pixels?

That was stupid of me. Seems doable now.

I think you are right about the scroll complete event, even in the browser, I had this issue when scrolling the content while dragging it stiffly (keeping the mouse down) and letting go without the scrolling animation.

Let me know what you find about this issue.

Thanks man.

4

I’ve created an issue: https://github.com/driftyco/ionic/issues/3450

And a plunker, that shows the bug: http://plnkr.co/edit/Uplv0wqBStgkQLujjJdN?p=preview

Unfortunately, I can only reproduce it by playing around but found no deterministic flow …

5

Did you manage to sort your issue out? The one where the scroll complete is not reliably firing.

6

Unfortunately not. I hope the ionic team can find the problem, but the bug is still open …