Как сделать бесконечный скролл в таблице при динамичной высоте?

Question

JDMeezy @JDMeezy

Как сделать бесконечный скролл в таблице при динамичной высоте?

Имею большое кол-во данных, идея в том чтобы предоставлять данные пользователю в табличном варианте, где посредством скролла идёт подгрузка дальнейших данных.

Но если человек зайдёт со смартфона, то изначальная высота таблицы меняется и скрипт перестаёт работать.

Каким образом можно это исправить ?

<div class="card tableWrapper col-12 mt-5 p-3">
          <div class="table-responsive">
            <table class="mainTable table table-bordered text-center ">
              <thead>
                <tr>
                  <th class="rounded-start" >Котельная</th>
                  <th>Наименование</th>
                  <th>Адрес</th>
                  <th class="rounded-end" >Действие</th>
                </tr>
              </thead>
              <tbody id="tableContent" >
                <td colspan="100%" >Выберите параметры для отображения данных</td>
              </tbody>
            </table>
          </div>
        </div>

.tableWrapper {
  max-height: 500px;
  .table-responsive {
    max-height: 450px;
    width: 100%;
    overflow: auto;
    display: inline-block;
    thead {
      position: sticky;
      top: -1px;
      background: $tableBG;
      border: 2px solid $tableBG;
    }
  }
}

let tableData = document.getElementsByClassName('table-responsive')[0];
function autoScrollData(){
    if (tableData.scrollHeight - tableData.scrollTop == tableData.offsetHeight) {
        console.log(`${tableData.scrollHeight} - ${tableData.scrollTop} == ${tableData.offsetHeight}`);
        let district = formFilter.getAttribute('data-district');
        let boiler = formFilter.getAttribute('data-boiler');
        let object = formFilter.getAttribute('data-object');
        let promise = fetch('/db/action.php?district='+district+'&boiler='+boiler+'&object='+object+'&limit='+limit);
        promise.then((response)=>{
            return response.text()
        }).then((result)=>{
            if (result === 'empty') {
                tableContent.insertAdjacentHTML('beforeend','<tr><td colspan="100%" >Данные по выбранным параметрам отсутствуют</td></tr>');
                tableData.removeEventListener('scroll',autoScrollData);
            } else {
                tableContent.insertAdjacentHTML('beforeend',result);
                limit += 10;
            }
        })
    }
}
tableData && tableData.addEventListener('scroll',autoScrollData);