Ionic-framework: bug: on-scroll-complete not reliably fired

[stefanmdt]

Type: bug

Platform: ios 8 browser

I've created a plunker to show the issue: http://plnkr.co/edit/Uplv0wqBStgkQLujjJdN?p=preview

I could reproduce it on iPhone and iPad Safari browser, but on iPhone it was easier. You just have to scroll up and down in different ways. The item text changes for one second when the handler is called. Sometimes the scrollbar does not disappear and the event is not fired.

[perrygovier]

I'm having trouble reproducing this. Is it possible the scrolling didn't come to a complete stop before you started again? iOS has a _very_ slow scroll decay rate.

[stefanmdt]

I'll try to record a screencast and find out how to reproduce it more reliable ...

[stefanmdt]

Here is the screencast directly from iPhone 5: https://www.dropbox.com/s/fyvucv7tg4ki1da/on-scroll-complete.mov?dl=0

[daco]

I've got the same problem. Sometimes (1 in 20 or so) the event is not fired. In ios 8.

[MoeHadla]

Device: iphone (ios)

I am going to add some further information to possibly get us closer to the issue here.

I have a bug that I presume relates to this issue (instead of me going ahead and opening another issue)

Try this:

• Add 2 ion-contents of 50% width (width does not matter as long as they are next to each other).
  Note: Give them some decent hi=eight for finger scroll space.
• Add items inside an on-scroll-complete functions for each. (Just log something or change text as above)
• start scrolling on one of the ion-contents downwards and in the direction of the other scroll. Let your finger exit the first content to the second one.

If done correctly, you should notice that the on-scroll-complete of the first scroll did not fire at all.

I need help with this issue please.

Thanks.

[bodinaren]

I'd like to add to this issue as I just ran into this on Android as well (and browser). It's unreliable, but I found it quite easy to reproduce. I've made this most simple of codepen: http://codepen.io/bodinaren/pen/ZGoWKE

The most reliable way I found to reproduce the bug is by scrolling from and past the content edges (e.g. be on top and keep scrolling up). Preferable you should scroll fast (click/touch, move, release in quick succession).

It seems to me to be limited to when there's no "smooth scrolling" effect (keeps scrolling after release).

[stefankp]

I encountered the same bug on iOS 8.4 (iPhone 6 and simulator).

The on-scroll-complete event is not triggered every time the scrolling is complete (at least visually). This also means that the scrollbar does not fade out.

[tusharbhatta]

I'm facing same issue on android lollipop. Any update on this please?

[toostn]

I also had issues with on-scroll-complete not being triggered and nailed down the issue to scrollView.js:2042 where a check is made if the velocity is high enough to result in deceleration. There was no else-block if this condition isn't true. When I added a call to self.__scrollingComplete(); if the deceleration check fails, everything works as expected.

I haven't yet found any unwanted effects caused by this change, but since the doTouchEnd function is very complex I think it would be great if the original author had a look at this solution.

Line 2035-2053 of my patched scrollView.js (2045-2047 added by me):

2035           // How much velocity is required to start the deceleration
2036           var minVelocityToStartDeceleration = self.options.paging || self.options.snapping ? self.options.decelVelocityThresholdPaging : self.options.decelVelocityThre     shold;
2037
2038           // Verify that we have enough velocity to start deceleration
2039           if (Math.abs(self.__decelerationVelocityX) > minVelocityToStartDeceleration || Math.abs(self.__decelerationVelocityY) > minVelocityToStartDeceleration) {
2040
2041             // Deactivate pull-to-refresh when decelerating
2042             if (!self.__refreshActive) {
2043               self.__startDeceleration(timeStamp);
2044             }
2045           } else {
2046             self.__scrollingComplete();
2047           }
2048         } else {
2049           self.__scrollingComplete();
2050         }
2051       } else if ((timeStamp - self.__lastTouchMove) > 100) {
2052         self.__scrollingComplete();
2053       }

[toostn]

Also, the easiest way to reproduce the issue is to scrub the scrollable content shortly up and down, like you were trying to get rid of a stain on the glass of the phone. It is pretty hard to trigger when using a mouse.

[rolandoldengarm]

On Android, the event never fires at all. The onScroll event fires without a problem, but the onScrollComplete event never does fire.

[lucasbeef]

+1 : it also never fires for me on Android

[bodinaren]

I'm just guessing here, but I believe this event will not fire on Android anymore when you're using native scrolling, which is default since version 1.2.0. Does this match your experiences?

[lucasbeef]

Yes, I'm using native scrolling

[blefebvre]

I am able to reliably reproduce this issue when I set overflow-scroll="true" on ion-content. To demonstrate, I put together a small app based on the blank template to alert the value of scrollTop when on-scroll-complete fires. With overflow-scroll="false":

Observe how the popup no longer appears when overflow-scroll="true":

You can reproduce this issue with the following app: https://github.com/blefebvre/ion-content-scroll-issue/

[jgw96]

Hello all! Are you all still having this issue with the latest version of ionic? 1.3.0

[jgw96]

Hello! Since it has been a while since there was any activity on this issue i will be closing it for now. Feel free to comment if your still having this issue though!

[dongdh]

Well, not working on android Samsung 6s with latest ionic 1.3.0. event is not triggered att all for android native scrolling, have to set jsscroll to true.

[cozzbie]

Still doesn't trigger... ionic 1.7.16

[panlina]

The issue still exists. And I think @toostn 's comment is convincing. After looking into the source, I'm quite sure that the author just forget to call scroll complete handler when touch ends with a low velocity.
Can the team take a look?

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.