title: Scroll Div to Bottom in Ionic
body: <p>I have an ionic page in which I have a scrollable div.</p>
  
  <pre><code>&lt;div #list class="main"&gt;
      &lt;div class="row-container" *ngFor="let log of logs"&gt;
          &lt;p class="log"&gt;{{log.guess}}  -  {{log.result}}&lt;/p&gt;
          &lt;div class="score-container"&gt;
              &lt;ion-icon name="star" style="color: gold;"&gt;&lt;/ion-icon&gt;
              &lt;p class="score"&gt;{{log.score}}&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The class of the div:</p>
  
  <pre><code>.main {
      height: 90%;
      border-top: 1px solid black;
      overflow-y: scroll;
  }
  </code></pre>
  
  <p>I want to automatically scroll to the bottom of the div when the page loads and also when a new item is added to the list.</p>
  
  <p>So far I have tried to use <code>@ViewChild('list') list:any;</code> to get the element. Then:</p>
  
  <pre><code>this.list.scrollTop = this.list.scrollHeight;
  </code></pre>
  
  <p>and</p>
  
  <pre><code>this.list.scrollToBottom(100);
  </code></pre>
  
  <p>But <code>scrollTop</code> just does not work. <code>scrollToBottom</code> threw an error that stated scrollToBottom was not a function.</p>
  
  <p>How can I scroll to the bottom of the div?</p>