title: typescript scroll position
body: <p>In my angular UI code, I have a component class that calls a  like below</p>
  <p>app.component.html</p>
  <pre><code>//...
  &lt;div class=&quot;banner&quot;&gt;
      &lt;p-dialog [(visible)]=&quot;displayCOI&quot; styleClass=&quot;coiDialog&quot; [contentStyle]=&quot;{'overflow-y': 'hidden'}&quot; [modal]=&quot;true&quot; [style]=&quot;{width: '75vw'}&quot; [baseZIndex]=&quot;10000&quot; [showHeader]=&quot;false&quot;
          [draggable]=&quot;false&quot; [resizable]=&quot;false&quot;&gt;  
          &lt;coi (notify)=&quot;onCoIAccept($event)&quot;&gt;&lt;/coi&gt;
      &lt;/p-dialog&gt;
  &lt;/div&gt;
  
  ...///
  </code></pre>
  <p>coi.component.html looks like below</p>
  <pre><code>&lt;div&gt;
  &lt;div class=&quot;row&quot; style=&quot;padding: 10px 0px&quot;&gt;
      &lt;div class=&quot;col-sm-4&quot;&gt;
      &lt;p align=&quot;center&quot;&gt;&lt;b&gt;Instructions&lt;/b&gt;&lt;/p&gt;                        
      &lt;br&gt;...//
      &lt;/div&gt;
      &lt;div #scrollDiv id=&quot;scrollDiv&quot; class=&quot;col-sm-6&quot; style=&quot;height:350px; overflow-y: scroll;&quot; (scroll)=&quot;onScroll($event)&quot;&gt;
      &lt;p-table #dt [columns]=&quot;cols&quot; [scrollable]=&quot;true&quot; [value]=&quot;usersLi&quot; [(selection)]=&quot;selectedUsersLi&quot;  dataKey=&quot;id&quot;&gt;
      //....
      ..///
      &lt;/p-table&gt;
      &lt;/div&gt;
      &lt;div class=&quot;col-sm-2&quot;&gt;
      &lt;div align=&quot;center&quot;&gt;
          &lt;button pButton type=&quot;button&quot; label=&quot;Accept&quot; [disabled]=&quot;disableAccept&quot; (click)=&quot;close()&quot; class=&quot;ui-button-rounded&quot;&gt;&lt;/button&gt;&amp;nbsp;
          &lt;/a&gt;
      &lt;/div&gt;
  &lt;/dv&gt;
  &lt;/div&gt;
  </code></pre>
  <p>coi.component.ts code is as below:</p>
  <pre><code>export class coiComponent  {
    @ViewChild(&quot;scrollDiv&quot;) scrollDiv: ElementRef;
    disableAccept: boolean = false;
    
    ngOnInit():void { 
      this.keys = Object.keys(this.propertyObj); 
      this._utilService.convertKeysToHeader(this.keys,this.cols);
      this.disableAccept = true;    
      this.loadRecords();
    }
    
    
    onScroll(event: any) { 
      // visible height + pixel scrolled &gt;= total height 
      if (event.target.offsetHeight + event.target.scrollTop &gt;= event.target.scrollHeight) {
          this.disableAccept = false;
          console.log(&quot;End&quot;);
      }
    }
    
     ngOnChanges(changes: SimpleChanges){
      console.log(&quot;ngOnChanges&quot; , changes);
      for ( const propName in changes){
          let change = changes[propName];
          if ( propName == 'coi'){
              // console.log('CHANGED...DO HERE');
              console.log(this.scrollDiv.nativeElement.offsetHeight);
              console.log(this.scrollDiv.nativeElement.scrollHeight); 
          }
      
      }
      
      }
  }
  </code></pre>
  <p>As you can see the modal is divided into 3 DIV. <code>1. instrucations, 2: table, 3. Accept button</code>
  The modal by itself has a fixed height and scroll hidden. The div with table has a fixed height and overflow scroll and it works perfectly. Now the table can be with 30-50 records so vertical scrolling is enabled. I want the accept button on the 3rd div to be enabled only when the user had scrolled the table and has seen all the records. So the <code>function (scroll)=&quot;onScroll($event)&quot;</code> enables only when the scroll is scrolled completely and it works perfectly.</p>
  <p>my question is Some users may see less than 5-10 records which means scroll wouldn't be enabled for those users and accept also need to be enabled for them. Any suggestion on how to do this, please? I tried adding an id for the div tag called &quot;scrollDiv&quot; and #scrollDiv and passing this as an ElementRef and on ngOnChange  trying to get the offsetHeight and scrollHeight but I get value '0' on all the cases.` Can someone help me with this?</p>
  <p>I have updated my question. Please give some suggestions. Thank you.</p>