html - 如何使 从底部滚动

Question

我在 div 中创建了一个表格以使其可滚动；

<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>

这个表格可以从上到下滚动。如何使表格的溢出从底部开始并向上滚动？

Answer 1

您需要为此使用 javascript。使用 scrollTop 从顶部访问滚动偏移量(默认为 0)。因此，您必须获取 div 的高度并将 div 的 scrollTop 设置为其高度。为了获得高度，我使用了 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>