Cómo funciona
Desplazamiento virtual (virtualización real)
- Constant DOM size - Only ~20 items in DOM regardless of total dataset
- Performance - Can handle millions of items smoothly
- Fixed heights - Requires items to have consistent, known heights
- Use case - Tables, lists with uniform row heights
- DOM strategy - Items added/removed dynamically as you scroll
Desplazamiento infinito (carga diferida)
- Growing DOM - All loaded items stay in DOM
- Performance - Good for hundreds/low thousands of items
- Variable heights - Works with dynamic content heights
- Use case - Feeds, timelines with rich content
- DOM strategy - Items appended, never removed
Ejemplos de desplazamiento virtual
True virtualization - constant DOM size
Línea de tiempo - 5000 elementos
Solo ~20 elementos en el DOM en todo momento
Aún no compatible
True virtual scroll (windowed rendering) requires a custom JS hook that calculates visible indices from scroll position and row height, then only renders those rows. This is planned for a future release.Por qué es complejo en LiveView
LiveView manages the DOM server-side. True virtualization needs client-side DOM manipulation that conflicts with LiveView's diffing. A proper implementation requires a dedicated JS hook that coordinates with the server to only request visible data windows.Tabla - 10000 filas
Desplazamiento fluido por grandes conjuntos de datos
Aún no compatible
Virtual scroll for tables requires fixed row heights and a hook that renders spacer rows above/below the visible window. This approach works in LiveView but needs careful implementation to avoid conflicts with DOM patching.Alternativa: paginación del lado del servidor
For large datasets, use the<.pager> component with server-side queries. This is more efficient than virtual scroll for most use cases since it transfers only the visible page of data.
Ejemplo de desplazamiento infinito
Lazy loading - items accumulate in DOM. Uses PureAdminInfiniteScroll hook.
Feed de línea de tiempo - desplazamiento infinito
Loads more items automatically as you scroll (20 of 200 loaded)
-
09:00John Smith performed action #0
-
10:05Emma Davis performed action #1
-
11:10Luna Bonifacio performed action #2
-
12:15Yoan Almedia performed action #3
-
13:20Sarah Chen performed action #4
-
14:25Mike Johnson performed action #5
-
15:30John Smith performed action #6
-
16:35Emma Davis performed action #7
-
17:40Luna Bonifacio performed action #8
-
18:45Yoan Almedia performed action #9
-
09:50Sarah Chen performed action #10
-
10:55Mike Johnson performed action #11
-
11:00John Smith performed action #12
-
12:05Emma Davis performed action #13
-
13:10Luna Bonifacio performed action #14
-
14:15Yoan Almedia performed action #15
-
15:20Sarah Chen performed action #16
-
16:25Mike Johnson performed action #17
-
17:30John Smith performed action #18
-
18:35Emma Davis performed action #19
Uso del hook de desplazamiento infinito
<div
id="scroll-sentinel"
phx-hook="PureAdminInfiniteScroll"
data-event="load_more"
data-has-more={to_string(@has_more)}
data-throttle="500"
data-root-margin="200px"
>
<.loader :if={@loading} />
</div>
| Atributo | Predeterminado | Descripción |
|---|---|---|
data-event
|
load_more
| LiveView event name to push |
data-has-more
|
true
| Set to "false" to stop observing |
data-root-margin
|
200px
| Preload buffer distance |
data-throttle
|
500
| Minimum ms between triggers |