Загрузка содержимого при прокрутке

Question

У меня есть ниже HTML таблица

<table id="label" style="width: 100%;"> 
 
\t <tr id="tr"> 
 
\t \t <td class='td'> 
 
\t \t \t <div class="layout" style="position: absolute; z-index: 1; width: 485px; height: 280px; " onclick="this.style.display='none';"><strong>The Internet connection has</strong></div> 
 
\t \t \t <iframe src="http://www.youtube.com/embed/w9DTUjrPTd0?wmode=opaque" frameborder="0" allowfullscreen width="100%" height="100%" ></iframe> 
 
\t \t </td> 
 
\t \t <td class='td'> 
 
\t \t \t <div class="layout" style="position: absolute; z-index: 1; width: 485px; height: 280px; " onclick="this.style.display='none';"><strong>Arsenal vs man city <br> 3-2 <br> \t 23/5/215 <br> أرسنال ضد مانشيستر سيتي</strong></div> 
 
\t \t \t <iframe width="100%" height="100%" src="https://www.youtube.com/embed/aDBDowU_lqc?wmode=opaque" frameborder="0" allowfullscreen></iframe> 
 
\t \t </td> 
 
\t </tr> 
 
\t <tr id="tr"> 
 
\t \t <td class='td'> 
 

 
\t \t \t <div class="layout" style="position: absolute; z-index: 1; width: 485px; height: 280px; " onclick="this.style.display='none';"><strong>Communications' second year</strong></div> 
 
\t \t \t <iframe width="100%" height="100%" src="https://www.youtube.com/embed/ToACE9BTSCA?wmode=opaque" frameborder="0" allowfullscreen></iframe> 
 
\t \t </td> 
 
\t \t <td class='td'> 
 
\t \t \t <div class="layout" style="position: absolute; z-index: 1; width: 485px; height: 280px; " onclick="this.style.display='none';"><strong>Hello World</strong></div> 
 
\t \t \t <iframe width="100%" height="100%" src="https://www.youtube.com/embed/ToACE9BTSCA?wmode=opaque" frameborder="0" allowfullscreen></iframe> 
 
\t \t </td> 
 
\t </tr> 
 
\t <tr id="tr"> 
 
\t \t <td class='td'><div class="layout" style="position: absolute; z-index: 1; width: 485px; height: 280px; " onclick="this.style.display='none';"><strong>Hello World</strong></div> 
 
\t \t \t <iframe width="100%" height="100%" src="https://www.youtube.com/embed/ToACE9BTSCA?wmode=opaque" frameborder="0" allowfullscreen></iframe> 
 
\t \t </td> 
 
\t \t <td class='td'><div class="layout" style="position: absolute; z-index: 1; width: 485px; height: 280px; " onclick="this.style.display='none';"><strong>Hello World</strong></div> 
 
\t \t \t <iframe width="100%" height="100%" src="https://www.youtube.com/embed/ToACE9BTSCA?wmode=opaque" frameborder="0" allowfullscreen></iframe> 
 
\t \t </td> 
 
\t </tr> 
 
\t <tr id="tr"> 
 
\t \t <td class='td'><div class="layout" style="position: absolute; z-index: 1; width: 485px; height: 280px; " onclick="this.style.display='none';"><strong>Hello World</strong></div> 
 
\t \t \t <iframe width="100%" height="100%" src="https://www.youtube.com/embed/ToACE9BTSCA?wmode=opaque" frameborder="0" allowfullscreen></iframe> 
 
\t \t </td> 
 
\t \t <td class='td'><div class="layout" style="position: absolute; z-index: 1; width: 485px; height: 280px; " onclick="this.style.display='none';"><strong>Hello World</strong></div> 
 
\t \t \t <iframe width="100%" height="100%" src="https://www.youtube.com/embed/ToACE9BTSCA?wmode=opaque" frameborder="0" allowfullscreen></iframe> 
 
\t \t </td> 
 
\t </tr> 
 
\t <tr id="tr"> 
 
\t \t <td class='td'><div class="layout" style="position: absolute; z-index: 1; width: 485px; height: 280px; " onclick="this.style.display='none';"><strong>Hello World</strong></div> 
 
\t \t \t <iframe width="100%" height="100%" src="https://www.youtube.com/embed/ToACE9BTSCA?wmode=opaque" frameborder="0" allowfullscreen></iframe> 
 
\t \t </td> 
 
\t \t <td class='td'><div class="layout" style="position: absolute; z-index: 1; width: 485px; height: 280px; " onclick="this.style.display='none';"><strong>Hello World</strong></div> 
 
\t \t \t <iframe width="100%" height="100%" src="https://www.youtube.com/embed/ToACE9BTSCA?wmode=opaque" frameborder="0" allowfullscreen></iframe> 
 
\t \t </td> 
 
\t </tr> 
 
</table>

Я не хочу, чтобы сделать все строки сразу. Мне нужно отображать только 10 строк за раз, и когда пользователь прокручивает, вертикальная полоса прокрутки, то снова мне нужно добавить еще 10 строк в существующие 10 строк и так далее.

В основном у меня есть все статические строки html, и мне нужно сделать несколько, а затем добавить еще несколько прокруток. Как я могу это сделать?

Answer 1

Ну, так как это статическая страница, я думаю, вы можете отобразить первые 10 строк и скрыть другие. Затем, используя JS/Jquery, вам нужно проверить, доходит ли ваша полоса прокрутки до нижней части страницы. Вы можете использовать что-то вроде этого:

$(window).scroll(function() { 
    if($(window).scrollTop() + $(window).height() == $(document).height()) { 
     alert("bottom!"); 
     //shows the next 10 rows here 
    } 
}); 

Answer 2

Загрузить Javascript с помощью JQuery. Затем код

это-

$(window).scroll(function() { 
    var wScroll = $(window).scrollTop() 
    if (wScroll > ($('.class').offset.Top - ($(window).height/1.2) { 
    $('.class').css({'opacity': '1'); 
    } 
}; 

CSS

.class { 
    opacity: 0; 
    transition: all 0.3s ease-in-out; 
} 

Изменить».class' для любого имени, которое вы хотите, и добавить его к элементам, которые вы хотите добавить эффект. Кроме того, чтобы контролировать, когда он исчезает, вы можете изменить оператор if.