vitalif / dynamic-virtual-scroll Goto Github PK

If it isnt too much to ask, could you add a sample of how this library is used with Vue.js

Hello,

I'm working on a Vue implementation of your library. (I will open source it later)
It's going pretty well in a container, but i'm trying to achieve the same behaviour in the full page, where the body is the viewport and the scroll event listener is attached to window.

I'm calling virtualScrollDriver like this :

      const bounds = document.querySelector("body").getBoundingClientRect();
      const scrollTop = -bounds.top;
      const viewportHeight = window.innerHeight;
      const newState = virtualScrollDriver(
        {
          totalItems: this.items.length,
          minRowHeight: 100,
          viewportHeight: viewportHeight,
          scrollTop: scrollTop,
        },
        this.scrollerState,
        this.getRenderedItemHeight
      );

It works well, until you have DOM elements in the body, before the list.

For example here, I have a <pre> tag before the list, and it disturbs the virtual scroll behaviour.

If you remove the <pre> tag (or change it's position to fixed) it fixes the bug.

You can play with the code here (it can take a while to load) :
https://codesandbox.io/s/flamboyant-easley-ix9pe?file=/src/App.vue

How would you implement the full page mode when the list is not the only item the body ?

Also, not related to the full page mode, before any scroll happen, the lastItems are displayed:

Thanks for your help.

Could you add sample using Angular please? Thanks!