Home | scrolloop

scrolloop

+ of items. KB of code. Zero lag.

The modern scrolling component for React and React Native.
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>