Virtual DOM computing by Page Size

controllers.application\.js

import Controller from '@ember/controller';

import $ from 'jquery';
import { A } from '@ember/array';
import object, { action, set } from '@ember/object';

export default Controller.extend({
  
  totalCount: 1000,
  
  listItems: A(),
  
  showList: false,
    
  scrollBinded: false,
  
  VDArgs: '',
  
  virtualElementHeight: 0,
  
  init(){
    
    this._super(...arguments);
    
    let self = this,
        listItems = A();
    
    for (let i=0; i<self.totalCount; i++){
      
      	listItems.pushObject(object.create({'name': i+1, 'canShowItem': true}));
    }
    
    set(self, 'listItems', listItems);
  },
  
  bindScroll(selector, namespace, scroll_function) {

		let onScroll;

    set(this, 'scrollBinded', true);
		onScroll = function(event) {
			return scroll_function(event);
		};

		let eventName = namespace ? 'scroll.' + namespace : 'scroll';
		setTimeout(function(){
			$(selector).on(eventName, onScroll)
    },200);
	},
  
  unbindScroll(selector, namespace) {
		
    set(this, 'scrollBinded', false);
    
		let eventName = namespace ? 'scroll.' + namespace : 'scroll';
		$(selector).off(eventName);
	},
  
   toggleItems: action(function(hiddenListIndices, status, itemHeight){    
	    let self = this,
          startIndex = hiddenListIndices,
          endIndex = hiddenListIndices,
          listItems = self.listItems,
          tagClassName = self.VDArgs.itemClassName;
     
      if (!status) {
       	startIndex = hiddenListIndices-30;
      } else {
        endIndex += 30;
      }
     
      if (startIndex >= 0) {
          for(let i=startIndex; i<endIndex; i++){
              set(listItems[i], 'canShowItem', status);
          }

         if (status) {
           hiddenListIndices -= 30;
         }

         if (hiddenListIndices >=0 ){
          set(self, 'virtualElementHeight', (itemHeight*hiddenListIndices)+'px');
         }

     }
	}),

  actions:{
   
    toggleList(enablePaginate){
      
      let self = this;
        if(!this.scrollBinded){
					
          self.bindScroll('.list-wrapper', null, function(scollListElement){
scollListElement = $(scollListElement.target)[0];

            set(self, 'VDArgs', {scrolledPos: scollListElement.scrollTop, itemClassName: 'vd-item'});
          });
				}

     if (this.showList){               
			 self.unbindScroll('.list-wrapper', null);
       set(this, 'scrollBinded', false);
     }               
     set(this, 'showList', !this.showList);
    }
  }
});

modifiers.virtual-dom-element\.js

import Modifier from 'ember-modifier';
import { action, set } from '@ember/object';

export default class virtualDomElement extends Modifier {
  
  virtualElementCount = 0;
	
	prevScrolledPos = 0;

  didReceiveArguments(){
    
    let self = this,
				[handler] = self.args.positional,
        virtualElementCount = self.virtualElementCount;

    if (handler.scrolledPos < 10){
      set(self, 'prevScrolledPos', 0);
      set(self, 'virtualElementCount', 0);
    }
    
    if($('.'+handler.itemClassName+virtualElementCount).length){
      
      let scrolledPos = handler.scrolledPos,
	      	itemHeight = $('.'+handler.itemClassName+virtualElementCount)[0].offsetHeight;

      if(scrolledPos < self.prevScrolledPos){

      	if (itemHeight*(virtualElementCount) >= scrolledPos){
console.log(virtualElementCount, 'Prev'); 
        virtualElementCount = virtualElementCount - 30;
        this.args.named.callback(virtualElementCount, true, itemHeight);
        }
      } else {
        
        if (itemHeight*(virtualElementCount + 30) <= scrolledPos){
        
           virtualElementCount = virtualElementCount + 30
          this.args.named.callback(virtualElementCount, false, itemHeight);

          set(self, 'prevScrolledPos', scrolledPos);
          console.log(virtualElementCount, 'Reached'); 
        }  
      }
      
      set(self, 'virtualElementCount', virtualElementCount);
    }
  };
};

templates.application\.hbs

<h2><u>Virtual DOM - toggle 30 items</u></h2>

{{outlet}}
 <br>

  :: Total items : {{input value=totalCount}} &nbsp;
  <button {{action 'toggleList' true}}> 
	       {{#if showList}} 
         		Hide
         {{else}}
            Show 
         {{/if}} list 
  </button> 
  
<br><br>
{{#if showList}}
 
 <div class='list-wrapper' style='max-height:430px;overflow-y:auto;border:ridge 1px;background:aliceblue;'>
	<ul style="list-style-type: none;margin:0;" {{virtual-dom-element VDArgs callback=toggleItems}}>
		<li class='def-list-item' style="border: solid 0.1px lightgrey; height:{{virtualElementHeight}}"></li>
     
     {{#each listItems as |item index|}}
	     {{#if item.canShowItem}}
         <li class='list-item {{concat 'vd-item' index}}' style="border: solid 0.1px lightgrey;padding: 10px;">
           <center>
             <b> {{item.name}} :: {{index}} </b>
           </center>
        </li>
      {{/if}}
    {{/each}}
    
	</ul> 
</div>   
 
{{/if}}

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0",
    "ember-modifier": "1.0.5"
  }
}