我尝试使用offsetHeight和clientHeight来理解translateY计算

Question

我尝试使用translateY来固定表格的最后一行。它现在有效，但我不明白下面显示的计算差异。例如：app.page ='sections';

<div class='table-scroll' style="overflow-y: auto;">
    <table>
        <thead ...>
        <tbody>
              <tr.......
              <tr class="scroll-end">
               .....
              </tr>
         </tbody>
    </table>
</div>                  

在这个例子中：

.scroll-table has a scrollHeight of 1169 and a clientHeight of 864  

我以为我可以做第一个translateY（不滚动）：

864 - 1169 = -305 // .scroll-table.scrollHeight - .scroll-table.clientHeight

但我需要：

.scroll-end has an offsetTop : 1105 and an offsetHeight : 47  

并使用以下方法计算TranslateY：

864 - 1105 - 47 = -288  // .scroll-table.scrollHeight - .scroll-end.offsetTop - .scroll-end.offsetHeight 

好的，但是我不明白17的区别以及为什么第一次计算不能给我一个好的可见的最后一行？我用的是Chrome。

Answer 1

解决了。桌子的边缘底部为1rem;现在我可以使用translateY(sEnd)函数：

sTop = this.$scroll_table.scrollTop;    
sEnd = this.$scroll_table.offsetHeight - this.$scroll_table.scrollHeight + sTop;