我尝试使用偏视和客户端的转换计算来理解翻译计算

Question

我尝试使用Translatey固定表的最后一行。它现在有效，但我不理解下面显示的计算差异。示例：app.page ='section';

<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  

我以为我可以使用：

进行第一个翻译（无需滚动）

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

但我需要：

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

和使用：

计算翻译

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;