title: Detect scrollHeight change with MutationObserver?
body: <p>How can I detect when <code>scrollHeight</code> changes on a DOM element using <code>MutationObserver</code>? It's not an attribute and it isn't data either.</p>
  
  <p>Background: I need to detect when a scrollbar appears on my content element, the <code>overflow-y</code> of which is set to auto. I figured that the instant the scrollbar appears the value of <code>scrollHeight</code> jumps from 0 to, say, 500, so the idea was to set up a <code>MutationObserver</code> to detect a change in this property.</p>
  
  <p>What I've got so far:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="body" #body&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.body {
      overflow-y: auto;
  }
  </code></pre>
  
  <p><strong>TypeScript</strong></p>
  
  <pre><code>export class MyWatchedContent implements AfterViewInit, OnDestroy {
     @ViewChild('body', { read: ElementRef })
     private body: ElementRef;
  
     private observer: MutationObserver;
  
     public ngAfterViewInit() {
         this.observer = new MutationObserver(this.observerChanges);
         this.observer.observe(this.body.nativeElement, {
             attributes: true,
         });
     }
  
     public ngOnDestroy() {
         this.observer.disconnect();
     }
  
     private observerChanges(records: MutationRecord[], observer: MutationObserver) {
         console.log('##### MUTATION');
         records.forEach((_record) =&gt; {
             console.log(_record);
         });
     }
  }
  </code></pre>
  
  <p>If I, for example, change the background color in the developer window I can see the observer firing</p>
  
  <blockquote>
    MUTATION
    
    <p>my-content-watcher.component.ts?d0f4:233 MutationRecord {type: "attributes", target: div.body, addedNodes: NodeList(0), removedNodes: NodeList(0), previousSibling: null…}</p>
  </blockquote>
  
  <p>If, however, I change the window size to make the scrollbar appear there's no mutation detected. Is this doable with <code>MutationObserver</code> at all and if so, how?</p>