+++
date    = "2024-03-16T19:34:36+00:00"
lastmod = "2024-03-16T19:34:36+00:00"
tags    = [ "webdev", "gists" ]
+++

[Infinite scrolling](https://www.nngroup.com/articles/infinite-scrolling-tips/)
is unusual. Most implementations are "almost infinite" to avoid excessive
{{< abbr DOM "Document Object Model" >}} length (memory).

  - **Infinite scrolling**: Limits content to an arbitrarily large amount to avoid
    exhausting memory.

  - [**Virtual scrolling**](https://blog.logrocket.com/virtual-scrolling-core-principles-and-basic-implementation-in-react/#settings):
    Unload everything except the visible viewport + a top and bottom offset. Pad
    the rest.

Virtual scrolling is infinite, but breaks auxiliary actions ( {{< kbd CTRL >}} +
{{< kbd F >}} ) because what's on the screen is the content.

  ```js { caption="Increasing DOM length is infinite and constant length is virtual" }
  document.addEventListener("scroll", function() {
    console.log(document.querySelectorAll('*').length)
  });
  ```
The most popular library appears to be https://infinite-scroll.com.