How to get a smooth scrolling working using it with infinite scrolling?

I am using infinite scrolling to list bunch of expandable cards of hotels and when testing in my iPhone or simulator I am having the same problem I cannot get a smooth scrolling of the items…

In general the scrolling of the page looks a little choppy!

My list of hotels (a json file returned with an app.request call) can have more than 500 hotels and every hotel has one image as a cover to display.

Is it possible to have a smooth scrolling when using infinite scrolling with items cards that have images ?

my Cordova plugins:

Is there any solution for this flicking jumping effect when scrolling down and up and get a nice smooth scrolling and performance?

any advice?

here screenshot of my infinite scrolling test of hotels

here the video showing the problem:

video link

code:

      <div data-infinite-distance="50" class="page-content infinite-scroll-content" @infinite="loadMore">

        <div class="demo-expandable-cards">

          {{#each items}}

            <div class="card card-expandable" data-hotel-id="{{id}}">

              <div class="card-content">

                <div style="background: url({{images[0].url}}) no-repeat center bottom; background-size: cover; height: 240px"></div>
                <a href="#" class="link card-close card-opened-fade-in color-white" style="position: absolute; right: 15px; top: 15px">
                  <i class="icon f7-icons">close_round_fill</i>
                </a>


                <div class="card-content-padding">
                  content
                </div>

              </div>
            </div>

          {{/each}}


        </div>

        <div class="preloader infinite-scroll-preloader"></div>

      </div>

Use Virtual List + lazy images to increase performance. If you have a lot of things on page it scrolling performance will degrade

1 Like

If I use Virtual List, then it is possible to load the content as it is with infinite scrolling method that loads by blocks while scrolling down…

do you advice me to use only a virtual list? I have more than 500-800 hotels in my JSON results to show while the user scrolls down… every hotel has an image to display…

the issue I am having with infinite scrolling it is that I only load less than 50 cards and the scrolling start behaving choppy and slow not good user experience! not smooth at all…

The user never will browse all hostels until the last one I know, I intend to use filters buttons so the user can reorder the json array according what he wants for instance: lowest price first, best reviews etc…

This list also it is a list of expandable cards so when the user clicks it opens and shows the rest of the content that loads in that very moment for that hotel clicked…

any other recommendation or do you think a virtual list will be a better choice than the infinite scrolling method? I just want to keep the user experience enjoyable in this aspect and the scrolling not being smooth and being so choppy kills that part…

big thanks for any tips Vladimir! :+1:

If you already have the results, go with Virtual-List. Infinite Scrolling is okay, when you download data in parts - Virtual-List is great if you already have tons of data. I just replaced my standard-lists with Virtual List and the performance improved by far…

2 Likes

Using infinite scrolling I do not load all the data at once but I split the json data and when scrolling down I load the next 10 blocks of items and so…

using infinite scrolling the problem I found that there is no smooth scrolling and everything looks choppy and jumpy when scrolling up and down, my cards inside the infinite scrolling are expandable cards every card has one image cover already loaded when scrolling down but they disappear if I scroll up the list again…and load again… :frowning:

In my case it is very slow performance the virtual list with expandable cards inside this makes It so slow too and smooth scrolling not working properly but more jumpy…

I do not need to list the names of hotels in my virtual list but I need the list to be a list of expandable cards with one cover image and my json of hotels weights around 5-8 megabytes… I split it in chunks but same issue…

can you share part of your virtual list code how do you handle it to work smooth and not choppy? your virtual list is only a list of names or has inside a card with an image like mine?

thanks

I don’t draw anything by myself, but let virtual-list draw everything. In the template I just pass a thumbnail and a string (as in the examples).