一次向上滚动一个div(包含一个表)

Question

我有一个包含歌词的表.平均而言,这些歌曲有30行左右,但我不想让它们全部显示在页面下面,所以我将表格放在一个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行只显示'第x行',另一行显示3种不同形式的歌词:歌曲的原始语言,音译和另一种语言的翻译).

Answer 1

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

setInterval(doScroll, 500);

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