javascript - 一次向上滚动一个 div(包含一个表格)一行

Question

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

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

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

这是表格: jsFiddle

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

CSS:

.lyrics{
 font-family:Arial;
 overflow:scroll;
}

.lyric_line{
 border:solid 1px;
 text-align:center;    
}

(真实的表格至少有 2 行:1 行仅显示“Line x”，另一行显示 3 种不同形式的歌词:歌曲的原始语言、音译和另一种语言的翻译)。

Answer 1

function doScroll(){
   $('#divlyrics').scrollTop($('#divlyrics').scrollTop() + 10);
}

setInterval(doScroll, 500);

工作示例 http://jsfiddle.net/wrGnu/7/