app.css

.viewport {
  min-height: 500px;
}

input {
  display: block
}

application.hbs

{{#each fourGrandPaged as |page pageIndex|}}
  {{#in-viewport-area}}
    {{#each page as |item itemIndex|}}
        {{input type='text' value=(add (mult pageIndex 50) itemIndex)}}
    {{/each}}
  {{/in-viewport-area}}
{{/each}}

application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  fourGrand: Ember.computed(function() {
    return Array(40000).fill('hi')
  }),

  fourGrandPaged: Ember.computed('fourGrand', function() {
    const fourGrand = this.get('fourGrand')
    const fourGrandPaged = []
    for (let index = 0; index < 4000; index += 50) {
      fourGrandPaged.addObject(fourGrand.slice(index, index + 50))
    }
    return fourGrandPaged
  })
});

description.md

Uses ember-in-viewport in combination with min-height components to occlude fields.
Effectively scales to any size, the main problem being that detecting outside of the viewport would be preferable (no gap in the loading)

in-viewport-area.hbs

{{#if inViewport}}
  {{yield}}
{{/if}}

in-viewport-area.js

import Ember from 'ember'
import InViewportMixin from 'ember-in-viewport'

export default Ember.Component.extend(InViewportMixin, {
  classNames: ['viewport'],

  didEnterViewport() {
    this.set('inViewport', true)
  }
})