Question

我有以下的html表

＆＃13;

<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>

＆＃13;

我不想一次渲染所有行。我需要一次只显示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

使用Jquery加载Javascript。然后代码是 -

$(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;
}

更改＆＃39; .class＆＃39;到您想要的任何名称，并将其添加到要添加效果的元素。另外，为了控制它何时消失，你可以改变if语句。

滚动

2 个答案: