Limitted count of elements

[pawelzwronek]

Hi! I've found an issue when there is too many elements to be displayed. I think it's chrome related implementation limit. When I try to display 3.000.000 elements 13px of height each then VScroll breaks. A height of the scrolled element (div in my situation) should be set to 39000000px but it's 3.35544e+07px at most. This makes viewport size has not been changed to appear in the log when I try to scroll to some far position and nothing is displayed. There is also error: Can't set buffer items in the log.

[dhilt]

@pawelzwronek This is great issue, thank you for raising it. I can confirm that 33,554,428 pixels is the dimensional limit for the Chrome browser. Other browsers have similar limitations. So, we can’t use a viewport exceeding 33,554,428 pixels. Specifically, I'm talking about 2 fwd/bwd empty elements (data-padding-forward/data-padding-backward) that emulate virtualization: https://github.com/dhilt/vscroll/wiki/Viewport.

I see 2 general solutions:

• Split each of the fwd/bwd elements into sets of empty elements with dimensions that don't exceed the browser limits.
• Implement virtualization within virtualization. For instance, the fwd element could be N times smaller than should be , with each scroll event multiplying the corresponding parameter (viewportElement.scrollTop) by N for internal calculations.

That said, this would be a major change, and right now I can’t estimate how much effort it might take.

[pawelzwronek]

The first solution seems straightforward, and I would personally give it a try. However, one potential issue is that the parent element might also be limited to 33,554,428 pixels.

The second solution is a bit unclear to me, but I’m not as familiar with the code/architecture as you are.

In any case, I’m looking forward to the fix so I can apply it to my project. 😀

[pawelzwronek]

Another issue I've noticed in Firefox and I'm not sure but it may be related to this issue. In the demo project, when I set the settings in index.js to:

    settings: {
      minIndex: 0,
      maxIndex: 800000,
      sizeStrategy: 'constant',
    },

then the vertical scrollbar change it's height to very big as there would be just few elements. Setting maxIndex: 700000 fix the issue and the scrollbar is tiny and I can scroll the whole list.

[dhilt]

I checked the 1st approach (splitting 1 big virtual element into a set of smaller elements) and it doesn't work. Of course, that's because the scrollable wrapper remains the same. So the scrollable area can't be larger than 33,554,428px. This means that another approach should be taken, the one I called virtualization within virtualization. It's about scaling the viewport so that the viewport size never exceeds, say, 10kpx, but each pixel is a virtualization of N pixels, where N is rational, >= 1, and depends on the real dimensions. This should take time...

[pawelzwronek]

That's unfortunate my guess of limited size of the parent was correct, but thanks for testing it. Now I get the virtualization within virtualization idea :) It looks promising and cant wait for testing it 👍