experiment_id: web-retrieval-v1
fixture_id: /docs/features/virtual-scrolling
mode: provenance
representation: html
origin_response_id: be28af0a533b32bbad0b6e30a2a511ec
version: 2026-10-22
version_created_at_utc: 2026-10-22T19:49:39.639Z
version_nonce: fd277d6505ba44ab27bc975a145b405e
generated_at_utc: 2026-10-25T00:59:22.423Z
response_nonce: 3aabe01ec3a8f68fce5618492b88de88
Docs Version 1

Virtual Scrolling

In ZingGrid, virtual scrolling is called "infinite scrolling". This is a flexible performance feature that directly integrates with Firebase in one line and works well with any remote API.

Infinite Scroll

To enable infinite scrolling, add the height and page-size attributes to your <zing-grid> tag and the [name="loadByScroll"] attribute to <zg-param> with value="true".

  1. Add the height and page-size attributes to your <zing-grid> tag

    <zing-grid height="400" page-size=10>

  2. Add loadByScroll parameter to <zg-param>

    <zg-param
  name="loadByScroll"
  value="true">
</zg-param>

  3. If you are integrating with Firebase, add adapter and src attributes to <zg-data>

    <zg-data
  src="https://zinggrid-examples.firebaseio.com/movies"
  adapter="firebase"
>

Altogether, it will look like this:

<zing-grid height="400" page-size=10>
  <zg-data src="https://zinggrid-examples.firebaseio.com/movies">
    <zg-param name="loadByScroll" value="true"></zg-param>
  </zg-data>
</zing-grid>

Infinite Scroll Grid

Here is a complete grid with infinite scroll enabled:

Top

Related Resources

Here are some extra resources related to this feature to help with creating your grid:

[features: virtual scrolling]