yaparoff,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.title {
font-size: 30px;
margin-bottom: 70px;
}
.table {
width: 1000px;
}
.table__ajax-content {
min-height: 100vh;
}
.table__row {
height: 40px;
padding: 0 10px;
}
.table__row:nth-child(odd) {
background-color: #F3F3F3;
}
body.load:after{
content: "Загрузка...";
text-align: center;
display: block;
}
html *{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="title">Title</div>
<div class="table">
<div class="table__ajax-wrapper">
<div class="table__ajax-content">
<div class="table__row">1</div>
<div class="table__row">2</div>
<div class="table__row">3</div>
<div class="table__row">4</div>
<div class="table__row">5</div>
<div class="table__row">6</div>
<div class="table__row">7</div>
<div class="table__row">8</div>
<div class="table__row">9</div>
<div class="table__row">10</div>
<div class="table__row">11</div>
<div class="table__row">12</div>
<div class="table__row">13</div>
<div class="table__row">14</div>
<div class="table__row">15</div>
</div>
</div>
</div>
<script>
var body = document.querySelector('body');
var lastTableRow = document.querySelector('.table__row:last-child');
var i = 16;
var busy;
function ajaxLoader()
{
if(busy) return;
busy = true;
body.classList.add("load");
window.setTimeout(onAjaxSuccess, 3000)
}
function onAjaxSuccess() {
body.classList.remove("load");
var tableAjaxContent = "";
for (var j = 0; j < 2; j++) {
var tableRow = `<div class="table__row">${i}</div>`;
tableAjaxContent += tableRow;
i++;
}
lastTableRow.insertAdjacentHTML("afterEnd", tableAjaxContent);
lastTableRow = document.querySelector('.table__row:last-child');
busy = false;
}
function checkAjaxLoading() {
var bottomCoord = lastTableRow.getBoundingClientRect().bottom;
var height = document.documentElement.clientHeight;
if (height >= bottomCoord) {
ajaxLoader();
}
}
window.addEventListener('scroll', function() {
checkAjaxLoading();
});
</script>
</body>
</html>