Javascript 将div（包含表格）一次向上滚动一行

我有一张包含歌词的桌子。这些歌曲平均有30行左右，但我不希望它们一次全部显示在页面下方，所以我将表格放在一个div中，并带有属性overflow:scroll

我想做两件事：一次在div中显示4或5行（表行），随着歌曲的进行，div向下滚动，因此当前播放行位于div的顶部

我猜代码将使用scrollTop和offsetHeight属性，但我不知道如何将它们放在一起

这是表格：

<div id="divlyrics" class="lyrics">
 <table>  
     <tr id="row_0">
    <td>
     <p id="lyric_0" class="lyric_line">
Song lyrics line 1<br>
     </p>
    </td>
   </tr>     
   <tr id="row_1">
    <td>
     <p id="lyric_1" class="lyric_line">
Song lyrics line 2<br>
     </p>
    </td>
   </tr>
   <tr id="row_2">
    <td>
     <p id="lyric_2" class="lyric_line">
Song lyrics line 3<br>
     </p>
    </td>
   </tr>
   <tr id="row_3">
    <td>
     <p id="lyric_3" class="lyric_line">
Song lyrics line 4<br>
     </p>
    </td>
   </tr>   
   <tr id="row_4">
    <td>
     <p id="lyric_4" class="lyric_line">
Song lyrics line 5<br>
     </p>
    </td>
   </tr>   
   <tr id="row_5">
    <td>
     <p id="lyric_5" class="lyric_line">
Song lyrics line 6<br>
     </p>
    </td>
   </tr>
  </table>
 </div>

（实际表格至少有2行：1行仅显示“x行”，另一行显示3种不同形式的歌词：歌曲原语、音译和翻译成另一种语言）

工作示例

您还可以使用：eq（#）选择器后缀获取所需表格的行，然后滚动到该行的y位置或偏移量

它看起来像这样，但请注意，我没有尝试/测试此特定代码：

<div id="scrollContainer">
<table id="scrollTable">
  <tr>
    <td>Row 1</td>
  </tr>
  <tr>
    <td>Row 2</td>
  </tr>
  <tr>
    <td>etc</td>
  </tr>
</table>
</div>

<script type="text/javascript">
var currentRow = 0;
function getRow(rowNum) {
  return parseInt($('#scrollTable tr:eq('+rowNum+')').position().top);
}
$(document).ready(function(){
  var end = $('#scrollTable tr').length;
  $('#scrollContainer').animate({height:"100px",overflow:"scroll"},'fast',function() {
    var t = setInterval(function() {
      $('#scrollContainer').scrollTop(getRow(currentRow));
      if (++currentRow >= end) clearInterval(t);
    }, 500);
  });
});
</script>

一排
第2排
等
var currentRow=0；
函数getRow（rowNum）{
返回parseInt（$（'#滚动表tr:eq（'+rowNum+'））.position（）.top）；
}
$（文档）.ready（函数（）{
var end=$（'#滚动表tr'）。长度；
$（'#scrollContainer'）。动画（{height:“100px”，overflow:“scroll”}，'fast'，function（）{
var t=setInterval（函数（）{
$（'#scrollContainer'）.scrollTop（getRow（currentRow））；
如果（++currentRow>=结束）清除间隔（t）；
}, 500);
});
});

这是Trinh Hoang Nhu写的一个简短版本。因为他使用了jQuery，这通常会使代码变长、变慢

function doScroll(){
   document.getElementById('divlyrics').scrollTop += 10;
}

setInterval(doScroll, 500);

---

您必须调整一些参数以获得所需，例如：10到一行的高度…谢谢。不用10px（Trinh）或1px（ama2），我想我可以得到第一行（row_0）的偏移，然后滚动到该行。我在生产中使用了这段代码，它工作得非常好。

<div id="scrollContainer">
<table id="scrollTable">
  <tr>
    <td>Row 1</td>
  </tr>
  <tr>
    <td>Row 2</td>
  </tr>
  <tr>
    <td>etc</td>
  </tr>
</table>
</div>

<script type="text/javascript">
var currentRow = 0;
function getRow(rowNum) {
  return parseInt($('#scrollTable tr:eq('+rowNum+')').position().top);
}
$(document).ready(function(){
  var end = $('#scrollTable tr').length;
  $('#scrollContainer').animate({height:"100px",overflow:"scroll"},'fast',function() {
    var t = setInterval(function() {
      $('#scrollContainer').scrollTop(getRow(currentRow));
      if (++currentRow >= end) clearInterval(t);
    }, 500);
  });
});
</script>

function doScroll(){
   document.getElementById('divlyrics').scrollTop += 10;
}

setInterval(doScroll, 500);