ionic-framework: VirtualScroll + InfiniteScroll scrolls top when reaching list bottom
Short description of the problem:
When the bottom of virtual list is reached, infinite scroll is triggered, items are loaded and displayed all ok, but after that the scroll jumps straight to top.
Tested in:
- Opera/Chrome via ionic serve
- Nexus 4 Android 5.1
- Samsung Galaxy S5 Android 5.1
New to Ionic, don’t know are they supposed to work together at all? Tried simple ion-list + infiniteScroll and works fine.
What behavior are you expecting?
The scroll should not jump to top when infinite scroll is triggered.
Also you can see an image flicker when scrolling. Don’t know how correctly to explain it, but sometimes when u scroll and an image comes in viewport, it displays an image that don’t belong to item, after some time, the correct image is displayed, and this change(flicker) is visible.
Which Ionic Version? 2.x
Plunker that shows an example of your issue
http://plnkr.co/edit/jNJBgEqPJlxttsHTRdmR?p=preview
Run ionic info from terminal/cmd prompt: (paste output below)
Cordova CLI: 6.1.1 Gulp version: CLI version 0.4.0 Gulp local: Local version 3.9.1 Ionic Framework Version: 2.0.0-beta.6 Ionic CLI Version: 2.0.0-beta.25 Ionic App Lib Version: 2.0.0-beta.15 OS: Node Version: v4.2.1
About this issue
- Original URL
- State: closed
- Created 8 years ago
- Reactions: 11
- Comments: 35 (11 by maintainers)
@royipressburger I don’t understand too, why
virtualScrollandinfiniteScrollcan’t work together. When I saw this 2 components, I thought that there will be very easy to do something like social network’s feed.Absolutely agree with you!
I believe that there is a problem right now with
virtualScrollthat Ionic team can’t solve. That’s why it can’t work withinfiniteScroll. Hope that in near future, they will fix it, andvirtualScroll+infiniteScrollwill become base of any other Ionic2 app. Let’s just understand that this is still beta, and devs still have a lot of work. But they should hear us and understand that this 2 components need to work together, to deliver an ‘as close as possible native feeling’ to the app. Mobile users are used already with such kind of scrolling, replacing this for example with pagination, in 2016, looks lame, in my opinion.Hey yall! Sorry for the radio silence on our end, not cool 😶
We’ve been looking at this issue quite a lot and have made quite a bit of work on this with whats in master. There’s still a bit of work to be done, but it’s being taken care of and will be resolved. Thanks for the patience.
Can we expect this in 2017 to be fixed? Thanks.
Hello! Thanks for opening an issue with us! Virtualscroll is meant to increase scrolling performance with large lists as it only renders enough data to fill the viewport as you scroll. InfiniteScroll allows you to do an action once a user scrolls to the bottom of a list. Most devs normally use this for loading more data once a user scrolls through the page. It is not recommended that you use them together, so that is why you are seeing issues. VirtualScroll should be used if you have a large list that you need a user to scroll through (like maybe a list of all the employees at a big company). It will help keep your app’s scrolling smooth even on low end phones. I would use infintescroll for something like search results where when the user scrolls to the bottom It would pull the next “page” of results. Hope this all makes sense!
@jgw96 Im having a hard time to understand why vritualscroll and infinitscroll aren’t meant to be used together? For me it look like very common use case. Think about News feed (like in facebook). You wouldn’t like to load all the feed because that will take ages and probably kill you server, so you need inifinitscroll. You also don’t want to display all the item above the current view of the user because he might have scroll down so much that he already viewed 1000 items.
And second question regarding the
ion-card, removing the shadow-box property will increase the performance?@mhartington Indeed radio silence is not cool. Could you please give us a rough estimate, or at least status? InfiniteScroll is a very basic feature used in most feeds, but it’s not usable at this point because of how slow scrolling gets.
I’d be a shame for such a deal breaker issue to go a full year unresolved…
@adambradley can we expect this in RC.5.?. THANKS
@naveedahmed1 I tested a lot of stuff and in the end came to give up on virtual scroll because it never satisfied me. (on scrolling many times I had empty/white areas, because displaying/rendering list items somewhat delayed) So my implementation is meant to work without virtual scroll.
+1
vritualscroll + infinitscroll is a basic feature. Ionic should fix this in high priority. Feeds are the basic features for many apps. please fix this or provide a viable solution. jumping to top is really not acceptable. I think this will be a major issue for many ionic 2 apps @brandyscarney @adamdbradley @mlynch @jgw96
Any updates on this?
Any update on this?
+1
Has any progress been made with this issue? Thanks in advance!
@adamdbradley should we expect it to be resolved in next release?
@lujakob does your solution works with virtualScroll ?
I have a basic solution for two way infinite scrolling that supports a replacement of list data if anybody is interested. I described it here and have a demo on a github repo. https://github.com/driftyco/ionic/issues/8037#issuecomment-263934994
+1
I also face the same issue and I also think virtual list and endless scrolling fit perfectly together. I’m also interested in any workaround or fix which works cross-browser, since jumping to top is really not acceptable. I think this will be a major issue for many ioni2 apps…
Also related to #6342.
This is really a great feature, if virtualScroll can update it’s dataset and calculate a new transformation matrix upon insert of new records.
Any feed implementation today should handle both infinite and virtual scrolling logic.
Perhaps it can be a new ionic component, e.g
ion-feed?