feat(infinite): add scroll in opposite direction #8099

Manduro · 2016-09-16T11:57:28Z

Short description of what this resolves:

This adds support for infinite scrolling towards the top of a view.

Changes proposed in this pull request:

Adds a position option to the InfiniteScroll component.
Calculates distance to top or bottom accordingly.
Maintains scroll position when adding content to the top.
Scrolls the page down on load when using position top.
Adds scrollDownOnLoad input to Content.

Ionic Version: 2.x

Fixes: #6696 #9237

theromis · 2016-10-05T20:12:41Z

somebody will react to this pull request?

Manduro · 2016-10-05T20:44:05Z

I've been using it and it works great for me. You do need to hook into the right viewcycle events to save the current and set the new scroll position or the browser will jump up with the new content. This implementation will differ per situation and should not be integrated (I think), but some documentation about it might be good.

theromis · 2016-10-05T21:15:20Z

@jgw96 could you check this great pull request?

manucorporat · 2016-10-05T23:13:14Z

@Manduro thanks for the PR and yes we I will look into it, but right now ionic 2 is feature freeze until 2.0 final.

The whole team is focusing efforts to fix as much bugs as possible.
This PR looks good and small, it has a lot of chances to be accepted but I don't want to add new code in this part of the development.

does it make sense?

Manduro · 2016-10-06T05:51:58Z

Sure, makes a lot of sense!

jpbullalayao · 2016-10-24T15:55:58Z

Hi @Manduro, thanks for this PR! Until Ionic merges this in, how can we use this in our own projects? Do we need to go into the node_modules and modify the JS files to reflect exactly your changes? Or is there a way to maybe install this file into our projects using the command line?

I have a chat feature in our app and would love to use this :)

Manduro · 2016-10-24T17:02:29Z

@jpbullalayao I'm not sure what's the proper way to do that. Maybe someone from the Ionic team can chime in?

Editing inside your node_modules is possible, but not really advised as the changes you make are not 'saved'.

jourdan-jobox · 2016-10-27T01:34:54Z

Hi @Manduro, I'm using this code for the chat feature in my app; I was wondering how you implemented your HTML/CSS in order to handle the UI for this?

As you said, we need to perhaps set the new scroll position in order to prevent the browser from jumping with the new content. How did you implement the Typescript/JS for this in your situation?

Manduro · 2016-10-27T08:04:44Z

Sure! This is a simple implementation. Key is to save the scroll position before adding new items to the list, and setting this same scroll position just after the new items are added to the dom. I'm definitely open to improvements, especially the part with the setInterval ;).

Code removed as it's incompatible and outdated with the current Ionic version.

jourdan-jobox · 2016-10-27T17:01:42Z

@Manduro Thanks so much!! This is helping a lot, I'll be happy to provide any feedback I might have after fully implementing this UI part.

Another question I have. What's MessageComponent? Is that another TS file that you created (I see that <messages> is also an HTML tag, so I assume those are related)? Would you mind sharing the code skeleton of that as well for us to understand how the subscription to the MessageComponent works?

Manduro · 2016-10-28T07:59:50Z

My MessageComponent just a custom component of mine. You could also use the <ion-item>/Item component from Ionic.

Jellevanlith35 · 2016-11-15T13:40:12Z

Does anyone know when Ionic will implement this feature with their version?

pdrosos · 2016-11-18T06:44:54Z

I am also following this one with great interest. I need it for a chat in my app very soon.
@manucorporat it would be great if this one can make it in the final release, will make many people happy! Thanks!

jourdan-jobox · 2016-12-16T18:12:01Z

This would be great for me as well for RC5/Final Release!

fixes

Manduro · 2017-01-23T09:51:58Z

Rebased on current master!

theromis · 2017-02-01T17:32:56Z

@Manduro Is it possible to see this PR in the ionic milestones?

theromis · 2017-02-01T18:29:59Z

Thank you @Manduro

@brandyscarney @manucorporat Is it possible to see this PR in the ionic milestones?

theromis · 2017-02-01T18:42:43Z

@jgw96 Pleeeeease accept this PR

brandyscarney · 2017-02-02T15:25:47Z

@theromis We'll take a look at it for the 2.1.0 release, thanks!

Manduro · 2017-03-06T16:14:58Z

@jgw96 I've added code to correctly maintain the scroll position when loading more at the top, give it a try!

~~I'm still looking for clues about where to add an automatic initial scroll to bottom.~~ Added this as well!

movrack · 2017-03-10T14:35:13Z

We also need this feature. Will it be in version 2.3.0 ?

maitham · 2017-03-13T17:47:51Z

Can I use this now? or Do I have to wait for it to be merged to master?

manucorporat · 2017-03-15T00:47:39Z

@Manduro the code looks pretty good, I will try to merge this in 2.3

manucorporat · 2017-03-15T00:59:27Z

src/components/content/content.ts

+   */
+  @Input()
+  get scrollDownOnLoad(): boolean {
+    return !!this._scrollDownOnLoad;


!! is probably not needed, right? since we are using isTrueProperty() in the setter.

Sure, this can be removed if you'd like. I just copied the getter and setter from @Input() fullscreen.

manucorporat · 2017-03-15T01:01:18Z

src/components/infinite-scroll/infinite-scroll.ts

+  set position(val: string) {
+    if (val === POSITION_TOP || val === POSITION_BOTTOM) {
+      this._position = val;
+    }


let's add here a console.error() telling val was an invalid value, and the two possible valid values.

Sounds good!

manucorporat · 2017-03-15T01:04:07Z

src/components/infinite-scroll/infinite-scroll.ts

@@ -267,7 +286,23 @@ export class InfiniteScroll {
   * to `enabled`.
   */
  complete() {
-    if (this.state === STATE_LOADING) {
+    if (this._position === POSITION_TOP) {


can you explain a little bit the algorithm used here?
how many frames does it take? and why?

I think I get it, but still... you probably know better

Sure! I'll add a few more comments as well.

New content is being added at the top, but the scrollTop position stays the same, which causes a scroll jump visually. This algorithm makes sure to prevent this.

(Frame 1)

complete() is called, but the UI hasn't had time to update yet.

Save the current content dimensions.

Wait for the next frame using _dom.read, so the UI will be updated.

(Frame 2)

Read the new content dimensions.

Calculate the height difference and the new scroll position.

Delay the scroll position change until other possible dom reads are done using _dom.write to be performant.

(Still frame 2, if I'm correct)

Change the scroll position (= visually maintain the scroll position).

Change the state to re-enable the InfiniteScroll. This should be after changing the scroll position, or it could cause the InfiniteScroll to be triggered again immediately.

(Frame 3)

Manduro · 2017-03-15T11:35:10Z

@manucorporat Thanks! I've made some slight changes as requested. Haven't squashed to keep the history, so make sure to do that when merging.

Thanks for building this amazing framework :)

manucorporat · 2017-03-15T14:08:52Z

Merged! I also made a minor change:
e53bad1

Thanks a lot for the PR! awesome new feature!

references #10889

AlanChauchet · 2017-05-02T12:44:13Z

Hi @Manduro , I am trying to implement a chat application and I am using the infinite-scroll on top but unfortunatly I haven't been able to use your "Maintains scroll position when adding content to the top." feature. Once new data has loaded, it automatically scrolls back to the top, and then infinitely loading more and more.

andrewvmail · 2017-06-22T02:15:01Z

Im also having the same issue..

adriangube · 2017-07-25T09:36:26Z

@AlanChauchet I'm also trying to implement a chat application and i'm also having the same issue..

stalniy · 2017-08-07T06:58:44Z

There are 2 issues in current implementation:

sometimes data from server is received after read and write frames. Thus scroll is not updated properly
there is a conflict between WebKit smooth scroll behavior and setting scrollTop on ion-content. Found fix on SO - https://stackoverflow.com/questions/31229950/ios-webkit-overflow-scrollingtouch-and-scrolltop

stalniy · 2017-08-07T09:43:29Z

created a bug #12598 going to send PR shortly

ghost · 2017-08-07T09:50:48Z

@stalniy InfiniteScroll.complete() should be called after the data is received from the server, so that's not the issue here.

The issue with the scroll position not updating properly is a known bug on WKWebView, which you can read more about here #11587

stalniy · 2017-08-07T10:00:37Z

created a fix #12599

brandyscarney assigned manucorporat Oct 12, 2016

brandyscarney added the v2 label Oct 12, 2016

brandyscarney added the feature label Oct 27, 2016

Manduro closed this Jan 23, 2017

Manduro force-pushed the patch-1 branch from 70f2a3d to a5bbbd5 Compare January 23, 2017 09:43

feat(infinite): add scroll in opposite direction

6d8a6a6

fixes

Manduro reopened this Jan 23, 2017

Merge branch 'master' into patch-1

d5066e1

brandyscarney added this to the 2.1.0 milestone Feb 2, 2017

adamdbradley unassigned manucorporat Feb 10, 2017

jgw96 self-assigned this Feb 10, 2017

manucorporat modified the milestones: 2.2.0, 2.3.0 Mar 4, 2017

fix(infinite-scroll): keep scroll position

8837fcd

Manduro mentioned this pull request Mar 6, 2017

Infinite scroll on opposite direction (chat behavior) #6696

Closed

Manduro added 3 commits March 6, 2017 18:02

feat(content): scroll down on load

480e5a6

fix(infinite-scroll): scroll the content down on load

2b0283b

Merge branch 'master' of https://github.com/driftyco/ionic into patch-1

4d74f05

Merge branch 'master' into patch-1

73ebcc5

manucorporat suggested changes Mar 15, 2017

View reviewed changes

Requested changes

c770083

Manduro mentioned this pull request Mar 15, 2017

Feature: Start View at Bottom #9237

Closed

manucorporat merged commit 6918275 into ionic-team:master Mar 15, 2017

Manduro deleted the patch-1 branch March 15, 2017 14:02

manucorporat added a commit that referenced this pull request Mar 23, 2017

fix(infinite-scroll): regression in #8099

58b57c0

references #10889

vzharkov mentioned this pull request Apr 19, 2017

Ionic 2 infinite scrolling gets stuck #10345

Closed

feat(infinite): add scroll in opposite direction #8099

feat(infinite): add scroll in opposite direction #8099

Conversation

Manduro commented Sep 16, 2016 • edited Loading

Short description of what this resolves:

Changes proposed in this pull request:

theromis commented Oct 5, 2016

Manduro commented Oct 5, 2016

theromis commented Oct 5, 2016

manucorporat commented Oct 5, 2016 • edited Loading

Manduro commented Oct 6, 2016

jpbullalayao commented Oct 24, 2016

Manduro commented Oct 24, 2016

jourdan-jobox commented Oct 27, 2016

Manduro commented Oct 27, 2016 • edited Loading

jourdan-jobox commented Oct 27, 2016

Manduro commented Oct 28, 2016

Jellevanlith35 commented Nov 15, 2016

pdrosos commented Nov 18, 2016

jourdan-jobox commented Dec 16, 2016

Manduro commented Jan 23, 2017

theromis commented Feb 1, 2017

theromis commented Feb 1, 2017

theromis commented Feb 1, 2017

brandyscarney commented Feb 2, 2017

Manduro commented Mar 6, 2017 • edited Loading

movrack commented Mar 10, 2017

maitham commented Mar 13, 2017

manucorporat commented Mar 15, 2017

manucorporat Mar 15, 2017

Choose a reason for hiding this comment

Manduro Mar 15, 2017

Choose a reason for hiding this comment

manucorporat Mar 15, 2017

Choose a reason for hiding this comment

Manduro Mar 15, 2017

Choose a reason for hiding this comment

manucorporat Mar 15, 2017

Choose a reason for hiding this comment

Manduro Mar 15, 2017 • edited Loading

Choose a reason for hiding this comment

Manduro commented Mar 15, 2017 • edited Loading

manucorporat commented Mar 15, 2017 • edited Loading

AlanChauchet commented May 2, 2017

andrewvmail commented Jun 22, 2017

adriangube commented Jul 25, 2017

stalniy commented Aug 7, 2017

stalniy commented Aug 7, 2017

ghost commented Aug 7, 2017

stalniy commented Aug 7, 2017

Manduro commented Sep 16, 2016 •

edited

Loading

manucorporat commented Oct 5, 2016 •

edited

Loading

Manduro commented Oct 27, 2016 •

edited

Loading

Manduro commented Mar 6, 2017 •

edited

Loading

Manduro Mar 15, 2017 •

edited

Loading

Manduro commented Mar 15, 2017 •

edited

Loading

manucorporat commented Mar 15, 2017 •

edited

Loading