Virtuallist + infinite scroll issue


I use framework v4 and added virtual list with infinite scroll. This works fine until I am scrolled al the way down and want to go up realy fast. Nothing is displayed anymore and the user needs to close and open the app to continue.

Any suggestions on how to prevent this?

See this video which I made with my iphone X:

use my page with infinite scroll, forme work very good.

<div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="left">
        <a href="#" class="link back">
          <i class="icon icon-back"></i>
          <span class="if-not-md">Back</span>
      <div class="title" style="text-transform:uppercase;">{{Name}}</div>

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

    {{#each @root.LastLoad}}
    <div class="col-50 tablet-33 desktop-25">
      <a href="/{{type.type_name}}/id/{{id}}/"><div class="card demo-card-header-pic">
        <div style="background-image:url( {{cover}} )" class="card-header align-items-flex-end lazy">
          <small> {{title}} </small>
          <i class="icon f7-icons size-12">eye</i> <small style="font-stretch: all;">{{views}}</small><span style="color: green;"><i class="icon f7-icons size-12">arrow_up</i> <small style="font-stretch: all;">{{likes}}</span></small>
          <span style="color: red;"><i class="icon f7-icons size-12">arrow_down</i> <small style="font-stretch: all;">{{dislikes}}</span></small>

    {{#if @root.hasMoreItems}}
    <div class="preloader infinite-scroll-preloader"></div>


Dopey, have a look at the before and after parameters for the virtual list.

My virtuallist:

// Virtual List

            VLViewRecords = f7app.virtualList.create({

                el: ".VLViewRecords",

                items: $.parseJSON(LastRecords),

                searchAll: function (query, items) {

                    var found = [];

                    for (var i = 0; i < items.length; i++) {

                        if (items[i].name.toLowerCase().indexOf(query.toLowerCase()) >= 0 || query.trim() === '') found.push(i);


                    return found;



                '<li data-dbid="{{dbid}}">'+

                    '<a href="{{url}}" class="item-link item-content">'+

                        '<div class="item-media"><img src="{{img}}" class="badge-mdsmall"></div>'+

                        '<div class="item-inner">'+

                            '<div class="item-title">'+


                                '<div class="item-header">{{date}}</div>'+


                            '<div class="item-after">{{score}}</div>'+




                height: 88 // Height of items


            // Remove preloader below ten items

            if ($.parseJSON(LastRecords).length < 10) {

                $("#view-records .infinite-scroll-preloader").addClass("hidden");


And how I fill infinite scroll:

// Infinite Scroll

    // Loading flag

var allowInfinite = true;

    // View Records

        // Set Start Number

        var VLViewRecordsNum = 10; // First LoadLastRecords loaditem = Startnumber

        var VLViewRecordsLoadItems = 10;

        // Attach 'infinite' event handler

$$('#view-records .infinite-scroll-content').on('infinite', function () {

    // Exit, if loading in progress

    if (!allowInfinite) return;

    // Set loading flag

    allowInfinite = false;

    // Set variable to wait for items

    WaitLastRecords = 0;

    // Emulate 1s loading

    setTimeout(function () {

        // Reset loading flag

        allowInfinite = true;

        // Parse Array

        var ArrLastRecords = $.parseJSON(LastRecords);

        // Load Items, start after last timestamp

        LoadLastRecords(localStorage.getItem('Session'),sessionmeasure,VLViewRecordsLoadItems,"Load",ArrLastRecords[ArrLastRecords.length - 1].timestamp,localStorage.getItem('Lang'));

        // Period check if items are loaded

        var Interval = window.setInterval(function(){

            // If loading is done

            if (WaitLastRecords === 1) {

                // Stop checking


                // If no items are returned exit infinite scroll

                if (LastRecords === "null") {

                    // Nothing more to load, detach infinite scroll events to prevent unnecessary loadings

                    f7app.infiniteScroll.destroy('#view-records .infinite-scroll-content');

                    // Remove preloader



                } else {

                    // Append new items to Virtual List


                    // Change Startnumber for next load

                    VLViewRecordsNum = VLViewRecordsNum + VLViewRecordsLoadItems;

                    // Show scroll if hidden

                    $("#view-records .infinite-scroll-preloader").removeClass("hidden");



        }, 1000);

    }, 1000);


I hope this helps

please debug real Height when it render (must include padding and margin of list.
It will happen when Height not right.

Thanks, but i’ve checked and my list item is exactly 88px height. List item is 86px with 2px margin at the bottom. When I change the virtuallist height parameter to 86 the whole list is displayed incorrect.

When I debug in the browser I see the first X items are all gone when I scroll far to the bottom with infinite scroll and then scroll back up.

The item with split jerk is now the first item after <ul>

any suggestions?

Just saw your code that you have load infinite more than 1 , normally you can use just one only
not so sure if this effect.

Please tell me where I open more than one? I believe I use it one time only and only in this view. I really need to have this fixed. I used the example from framework7 page.

It was my mistake I just saw you have set interval and timeout.

The strange thing is the first items get removed from the list as I scroll all the way down.

I notice only 32 items are in virtual list. When I scroll down and reach 32 items the first items get removed and the next items load. There are only 32 items shown in html. Is this normal behavior for the virtual list?

Should the first items appear when I scroll back up or do I have to code this?

Just solved my issue by changing the virtual list to a simple list. It did not work for me with a virtual list because the top items are removed when scrolling.