Ionic content scroll position strange behaviour on firefox and safari

I’m building an infinite scroll app. It may have 2k+ elements to load and I’am appending elements with ion-infinite-scroll element and listening to ionInfinite.

As I append new items, I am removing earlier items from content, so the app stays smooth. The scroll behaviour downwards is correct. As new items are appended the scrollbar jumps up.

The problem starts when I need to append items on the opposite direction, upwards. To do so I am listening to scroll events and appending items accordingly with the following function:

['ionScroll', 'ionScrollEnd'].forEach(function(evt) {
        document.getElementById('product_content').addEventListener(evt, function() {
          document.getElementById('product_content').getScrollElement().then(ok => {
            var offsetTop = 600
            if (evt == 'ionScrollEnd') offsetTop = 200
            if (ok.scrollTop <= offsetTop && removedElementHtml.length > 0) {
              var qtyToAppend = lastAppendedQty
              if (evt == 'ionScrollEnd') qtyToAppend = removedElementHtml.length
              for (let index = 0; index < qtyToAppend; index++) {
                if (removedElementHtml[removedElementHtml.length - 1]) {
                  list.insertBefore(removedElementHtml[removedElementHtml.length - 1], list.firstChild);
                  removedElementHtml.splice(-1, 1)
                  list.lastChild.remove()
                  length--
                }
              }
              infiniteScroll.disabled = false;
            }
          })
        }, false);
      });

The problem that these event does not fire a scrollbar position recalculation on safari and firefox.
So lets say the user scrollposition is lower than 600, iex: 570, and the code appends 10 items upwards. The scrollTop value is not recalculated and stays on the same value, 570. This does not happen on chrome. On chrome the scrollbar position is recalculated and jumps down, the scrolltop on chrome will then become 570+ appended items height.

My guess is that the ion infinite scroll is calling an event for the browser to recalculate content height. As I am listening to scrollTop position to append items upwards, this same event is not fired when scrolling upwards.
Which events are being called with infinite scroll? How can I force the browser to recalculate content height and position the scrollbar accordingly?

Thanks

1 post - 1 participant

Read full topic