pinafore/routes/_components/VirtualList.html

<:Window bind:scrollY='scrollY'/>
<div class="virtual-list" ref:node style="height: {{$height}}px;">
  <!-- <div class="virtual-list-viewport" ref:viewport></div> -->
  {{#each $virtualItems as virtualItem, virtualIndex}}
    <VirtualListItem :component
                     props="{{virtualItem.props}}"
                     index="{{virtualItem.index}}"
                     key="{{virtualItem.key}}"
    />
  {{/each}}
</div>
<style>
  .virtual-list {
    position: relative;
  }
</style>
<script>
  import VirtualListItem from './VirtualListItem'
  import { virtualListStore } from '../_utils/virtualListStore'

  export default {
    oncreate() {
      this.observe('items', (items) => {
        this.store.set({'items': items})
      })
      this.observe('scrollY', (scrollY) => {
        console.log('scrollY', scrollY)
        this.store.set({scrollTop: scrollY})
      })
    },
    data: () => ({
      component: null
    }),
    store: () => virtualListStore,
    components: {
      VirtualListItem
    }
  }
</script>