Virtual

function MyComp(): JSX.Element {
  const items = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
  const rootHeight = 20;
  const rowHeight = 10;
  const overscanCount = 5;

  const [virtual, onScroll] = createVirtualList({
    // the list of items - can be a signal
    items,
    // the height of the root element of the virtualizedList - can be a signal
    rootHeight,
    // the height of individual rows in the virtualizedList - can be a signal
    rowHeight,
    // the number of elements to render both before and after the visible section of the list, so passing 5 will render 5 items before the list, and 5 items after. Defaults to 1, cannot be set to zero. This is necessary to hide the blank space around list items when scrolling - can be a signal
    overscanCount,
  });

  return (
    <div
      style={{
        overflow: "auto",
        // root element's height must be rootHeight
        height: `${rootHeight}px`,
      }}
      // outermost container must use onScroll
      onScroll={onScroll}
    >
      <div
        style={{
          position: "relative",
          width: "100%",
          // list container element's height must be set to virtual().containerHeight
          height: `${virtual().containerHeight}px`,
        }}
      >
        <div
          style={{
            position: "absolute",
            // viewer element's top must be set to virtual().viewerTop
            top: `${virtual().viewerTop}px`,
          }}
        >
          {/* only virtual().visibleItems are ultimately rendered */}
          {/* keyed={false} is required for item to be passed as an Accessor — <For> defaults to keyed={true}, passing raw values instead */}
          <For fallback={"no items"} each={virtual().visibleItems} keyed={false}>
            {item => <div>{item()}</div>}
          </For>
        </div>
      </div>
    </div>
  );
}

<VirtualList
  // the list of items (of course, to for this component to be useful, the list would need to be much bigger than shown here)
  each={[0, 1, 2, 3, 4, 5, 6, 7]}
  // the optional fallback to display if the list of items is empty
  fallback={<div>No items</div>}
  // an optional class applied to the element wrapping the rendered rows, useful for styling row layout (e.g. flex/grid)
  class="my-list"
  // the number of elements to render both before and after the visible section of the list, so passing 5 will render 5 items before the list, and 5 items after. Defaults to 1, cannot be set to zero. This is necessary to hide the blank space around list items when scrolling
  overscanCount={5}
  // the height of the root element of the virtualizedList itself
  rootHeight={20}
  // the height of individual rows in the virtualizedList
  rowHeight={10}
>
  {
    // the flowComponent that will be used to transform the items into rows in the list
    // item is an Accessor — call it to get the value
    item => <div>{item()}</div>
  }
</VirtualList>

<VirtualList each={items} rootHeight={400} rowHeight={40} class="row-list">
  {item => <div>{item()}</div>}
</VirtualList>

.row-list {
  display: flex;
  flex-flow: column;
  width: 100%;
}