javascript - 滚动时加载内容

Question

我有下面的html表格

<table id="label" style="width: 100%;">
	<tr id="tr">
		<td class='td'>
			<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>
			<iframe src="http://www.youtube.com/embed/w9DTUjrPTd0?wmode=opaque" frameborder="0" allowfullscreen  width="100%" height="100%" ></iframe>
		</td>
		<td class='td'>
			<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>	23/5/215 <br> أرسنال ضد مانشيستر سيتي</strong></div>
			<iframe width="100%" height="100%" src="https://www.youtube.com/embed/aDBDowU_lqc?wmode=opaque" frameborder="0" allowfullscreen></iframe>
		</td>
	</tr>
	<tr id="tr">
		<td class='td'>

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