How to make <div> scrollable from bottom

Question

I made a table inside a div to make it scrollable;

<div style="overflow-y: scroll; height:100px; width:100px;">
  <table
    <thead>
      <tr>
        <th>a</th>
        <th>b</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>a</td>
        <td>a</td>
      </tr>
      <tr>
        <td>b</td>
        <td>b</td>
      </tr>
      <tr>
        <td>t</td>
        <td>t</td>
      </tr>
      <tr>
        <td>a</td>
        <td>a</td>
      </tr>
      <tr>
        <td>b</td>
        <td>b</td>
      </tr>
      <tr>
        <td>t</td>
        <td>t</td>
      </tr>
    </tbody>
  </table>
</div>

This table is scrollable from top to bottom. How can I make the table's overflow start at the bottom and make it scroll upwards?

Answer 1

You need to use javascript for this. Using scrollTop for accessing the scroll offset from the top (default is 0). So you have to get the div's height and set the scrollTop of the div to its height. To get the height, I used getBoundingClientRect().height

let tableDiv = document.getElementById('main');
tableDiv.scrollTop = tableDiv.getBoundingClientRect().height;

<div id="main" style="overflow-y: scroll; height:100px; width:100px;">
<table
<thead>
<tr>
<th>a</th>
<th>b</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>b</td>
<td>b</td>
</tr>
<tr>
<td>t</td>
<td>t</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>b</td>
<td>b</td>
</tr>
<tr>
<td>t</td>
<td>t</td>
</tr>
</tbody>
</table>
</div>