Home | scrolloop

+ of items. KB of code. Zero lag.

Modern virtual and infinite scrolling for React, React Native, Preact, Vue, and Svelte.
Lightweight, Zero dependencies, and blazingly fast.

Get Started GitHub

Scroll to explore

See it in Action

O(visible items) rendering. Not O(n).

Virtual List

item #0

item #1

item #2

item #3

item #4

item #5

item #6

item #7

item #8

item #9

Inspector (DOM)

Nodes: 12

<div class="viewport" style="overflow: auto; height: 400px;">
  <div class="swappable-renderer" style="height: 48000px; position: relative;">
    <div class="item" style="height: 48px; transform: translateY(0px);">item #0</div>
    <div class="item" style="height: 48px; transform: translateY(48px);">item #1</div>
    <div class="item" style="height: 48px; transform: translateY(96px);">item #2</div>
    <div class="item" style="height: 48px; transform: translateY(144px);">item #3</div>
    <div class="item" style="height: 48px; transform: translateY(192px);">item #4</div>
    <div class="item" style="height: 48px; transform: translateY(240px);">item #5</div>
    <div class="item" style="height: 48px; transform: translateY(288px);">item #6</div>
    <div class="item" style="height: 48px; transform: translateY(336px);">item #7</div>
    <div class="item" style="height: 48px; transform: translateY(384px);">item #8</div>
    <div class="item" style="height: 48px; transform: translateY(432px);">item #9</div>
  </div>
</div>