+++ 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.