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种不同形式的歌词：在歌曲的原始语言中，音译和翻译成另一种语言）。 / p>

Answer 1

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

setInterval(doScroll, 500);

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

Answer 2

您还可以使用：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>

Answer 3

这是Trinh Hoang Nhu写的一个较短版本。因为他使用 jQuery ，这通常会使代码变得越来越慢。

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

setInterval(doScroll, 500);

一次向上滚动一个div（包含一个表）

3 个答案: