Я пытаюсь понять расчет translateY, используя offsetHeight и clientHeight

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  

и вычислить 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;