2

我有一张包含歌词的表格。平均而言，歌曲有 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 种不同形式显示歌词：歌曲的原始语言、音译和翻译成另一种语言）。

4

3 回答 3

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

setInterval(doScroll, 500);

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

于 2012-07-30T01:43:30.850 回答
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>
于 2012-07-30T03:17:01.207 回答
2

这是 Trinh Hoang Nhu 所写的一个较短的版本。因为他使用jQuery，这通常会使代码更长更慢。

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

setInterval(doScroll, 500);
于 2012-07-30T04:58:43.110 回答