pinafore/routes/_components/VirtualList.html

<:Window bind:innerHeight='innerHeight'/>
<div class="virtual-list" style="height: {{$height}}px;">
  <!-- <div class="virtual-list-viewport" ref:viewport></div> -->
  {{#each $visibleItems as item @key}}
  <VirtualListItem :component
                   offset="{{item.offset}}"
                   props="{{item.props}}"
                   key="{{item.key}}"
  />
  {{/each}}
</div>
<style>
  .virtual-list {
    position: relative;
  }
</style>
<script>
  import VirtualListItem from './VirtualListItem'
  import { virtualListStore } from '../_utils/virtualListStore'
  import throttle from 'lodash/throttle'

  const THROTTLE_TIME = 500
  const DISTANCE_FROM_BOTTOM_TO_FIRE = 400

  export default {
    oncreate () {
      let container = document.body.querySelector('.container')
      this.observe('innerHeight', throttle(() => {
        // respond to window resize events
        this.store.set({
          offsetHeight: container.offsetHeight
        })
      }, THROTTLE_TIME))
      this.observe('items', (items) => {
        this.store.set({
          'items': items
        })
      })
      this.store.observe('distanceFromBottom', distanceFromBottom => {
        console.log('distanceFromBottom', distanceFromBottom)
        if (distanceFromBottom >= 0 &&
            distanceFromBottom <= DISTANCE_FROM_BOTTOM_TO_FIRE) {
          this.fire('scrollToBottom')
        }
      })
      container.addEventListener('scroll', throttle((e) => {
        this.store.set({
          scrollTop: e.target.scrollTop,
          scrollHeight: e.target.scrollHeight
        }, {
          leading: false,
          trailing: true
        })
      }, THROTTLE_TIME))
      this.store.set({
        scrollTop: container.scrollTop,
        scrollHeight: container.scrollHeight,
        offsetHeight: container.offsetHeight
      })
    },
    data: () => ({
      component: null
    }),
    store: () => virtualListStore,
    components: {
      VirtualListItem
    }
  }
</script>