我有一個螢屏，在兩個表格中顯示學生的代課教師資訊，用于當天和下一個上學日。在有很多老師缺席的日子里，表格行太多而無法適應螢屏，我希望表格自動滾動/回圈內容（到底部，然后再次從頂部開始）。
我找到了上下滾動的代碼，但不是用于帶有表格的連續回圈。我還了解到，要回圈，我需要創建表格內容/正文的“克隆”，但我沒有比這更進一步。
這是HTML：
<table id="main">
<tr>
<td width="50%">
<table >
<tr>
<td colspan="5" >TODAY</td>
</tr>
<tr>
<td width="100%" colspan="5" style="margin: 0; padding: 0;"></td>
</tr>
<tr>
<td width="60" >Class</td>
<td width="20" >Period</td>
<td width="40" >Teacher</td>
<td width="40" >Substitute</td>
<td width="40" >Info</td>
</tr>
<tr >
<td>5RS</td><td>2</td><td>RSWI</td><td>LLOR</td><td>Room A41</td>
</tr>
<tr >
<td>7MC</td><td>5</td><td>TPOR</td><td>NFIE</td><td>Chem, Room S11</td>
</tr>
<!-- This list will often go on and on, usually 40 items -->
</table>
</td>
<td><!-- The same again for TOMORROW -->
</td>
</tr>
</table>
只應進行自動滾動/回圈
if (table_height > window.innerHeight)
（如果解決方案需要 table-head 和 tbody，我只需在表格上方寫下該文本，就可以將“TODAY”和“TOMORROW”作為表格中的單獨行洗掉。）
任何幫助深表感謝！
uj5u.com熱心網友回復：
我找到了一個解決方案，并將其發布在這里，以防有人遇到同樣的問題：
我在這個問題中修改了用戶和 trincot 提供的腳本以滿足我的需要。我將表格分成兩半，并將內部和外部 div 放在每個表格的內容周圍，分別稱為 inner1/outer1 和 inner2/outer2。
我調整了腳本，以便它可以獨立滾動兩個表。速度取決于桌子高度，并在outer1_scroll 中設定。如果您希望兩個表格的速度完全相同，請洗掉“ 5000”（我添加它是為了讓表格在內容很多時滾動得更快一些）。最后一行確保僅在必要時才激活滾動，即如果表格不適合視窗。
var outer1_height = parseInt($(".outer1").height());
var outer1_scroll = outer1_height*20 5000;
function autoScrollDown(){
$(".inner1").css({top:-$(".outer1").outerHeight()})
.animate({top:0},30000,"linear", autoScrollDown);
}
function autoScrollUp(){
$(".inner1").css({top:0}) // jump back
.animate({top:-$(".outer1").outerHeight()},outer1_scroll,"linear", autoScrollUp);
}
$('.outer1').css({maxHeight: $('.inner1').height()});
$('.inner1').html($('.inner1').html() $('.inner1').html());
if (outer1_height > window.innerHeight) {
autoScrollUp();
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/513171.html
標籤：循环滚动高度