Virtual DOM by toggle 30 items

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({
  
  count: A(),
  
  maxCount: A(),
  
  totalCount: 1000,
  
  listItems: A(),
  
  showList: false,
  
  paginateLimit: 0,
  
  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';

		$(selector).on(eventName, onScroll);

	},
  
  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;
      }
console.log(startIndex, endIndex);
     
     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(enablePaginate){

        self.send('allowPaginate');
      }
      
      if (self.showList){

	        set(self, 'count', self.count.clear());

          set(self, 'paginateLimit', 0);
          self.unbindScroll('.list-wrapper', null);
      } else {

        let arrayList = A();
    
        for(let i=0; i<self.totalCount; i++){

          arrayList.push(i+1);
        }

        set(self, 'maxCount', arrayList);

        if (self.paginateLimit){

          set(self, 'count', arrayList.slice(0, this.paginateLimit));
        } else {

          set(self, 'count', arrayList);
        }
      }
      set(self, 'showList', !self.showList);
    },
    
		allowPaginate(){
     
      set(this, 'paginateLimit', this.paginateLimit ? 0 : 15);
    },
    
    paginateDDList(){

			if(this.paginateLimit){

				let self = this,
					scollListElement = $('.list-wrapper')[0];

        if(!this.scrollBinded){
					
          self.bindScroll('.list-wrapper', null, function(){	

            set(self, 'VDArgs', {scrolledPos: scollListElement.scrollTop, itemClassName: 'vd-item'});
						if (scollListElement.clientHeight + scollListElement.scrollTop > (scollListElement.scrollHeight - 15)) { 	
							
              set(self, 'paginateLimit', self.paginateLimit + 10);
	        			
              set(self, 'count', self.maxCount.slice(0, self.paginateLimit));
						} 
            
            if (self.paginateLimit > self.totalCount){
             
              set(self, 'paginateLimit', self.totalCount);
              self.unbindScroll('.list-wrapper', null);
            }
						
					});
        }
			}
		}
  }
});

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;
     // console.log(scrolledPos, self.prevScrolledPos)
      if(scrolledPos < self.prevScrolledPos){

//console.log(itemHeight*(virtualElementCount));
      	if (itemHeight*(virtualElementCount+30) >= 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

<h1><u>Iterating `{{this.totalCount}}` items in each
	{{#if paginateLimit}} by 15 {{/if}} </u></h1>

( <i> Note :-  If we give "1000+" the UI render will be slow </i> )
<br><br><br>

{{outlet}}

	:: Pagination {{#if paginateLimit}} Enabled {{else}} Disabled {{/if}}
   
  {{#unless count}} 
	  
    &nbsp;&nbsp; => &nbsp;&nbsp; 
		<button {{action 'allowPaginate'}}> 
    	{{#if paginateLimit}} Disable 		{{else}}  Allow{{/if}} paginate 		</button>
  
  {{/unless}}
	
  <br><br><br>

  :: Total items : {{input value=totalCount}} &nbsp;
  <button {{action 'toggleList'}}> 
	       {{#if showList}} 
         		Hide
         {{else}}
            Show 
         {{/if}} list 
  </button> 
  
  {{#unless showList}} 
  
    {{#unless paginateLimit}}
  &nbsp;&nbsp; OR  &nbsp;&nbsp; <button {{action 'toggleList' true}}> 
           {{#if showList}} 
              Hide
           {{else}}
             Enable Paginate & Show 
           {{/if}} list 
    </button>
    {{/unless}} 
  {{/unless}}
  
  {{#if count}}
  	 &nbsp;&nbsp; => &nbsp;&nbsp; 
  	<b style='color:brown;'>
      {{#if paginateLimit}}
        {{paginateLimit}}
      {{else}}
        {{totalCount}}
      {{/if}} items loaded.
    </b>
  {{/if}}
  
<br><br>
{{#if showList}}
 
 <div class='list-wrapper' style='max-height:430px;overflow-y:auto;border:ridge 1px;background:aliceblue;' {{action 'paginateDDList' on='mouseEnter'}}>
 <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"
  }
}