javascript - Scroll a div (containing a table) up one row at a time - Stack Overflow

admin管理员组

文章数量:1279150

I have a table containing song lyrics. On average the songs have 30 or so lines, but I don't want them all displayed down the page at once, so I put the table in a div with the property overflow:scroll.

I want to do two things: display 4 or 5 lines (table rows) in the div at one time, and as the song progresses the div scrolls down so the current playing line is at the top of the div.

I'm guessing the code will use the properties scrollTop and offsetHeight but I don't know how to put it all together.

Here's the table: 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;    
}

(the real table would at least have 2 rows: 1 row just showing 'Line x' and another row showing the lyrics in 3 different forms: in the song's original language, a transliteration and a translation into another language).

I have a table containing song lyrics. On average the songs have 30 or so lines, but I don't want them all displayed down the page at once, so I put the table in a div with the property overflow:scroll.

I want to do two things: display 4 or 5 lines (table rows) in the div at one time, and as the song progresses the div scrolls down so the current playing line is at the top of the div.

I'm guessing the code will use the properties scrollTop and offsetHeight but I don't know how to put it all together.

Here's the table: 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;    
}

(the real table would at least have 2 rows: 1 row just showing 'Line x' and another row showing the lyrics in 3 different forms: in the song's original language, a transliteration and a translation into another language).

• javascript
• jquery
• html
• css
• scroll

Share Improve this question Follow edited Aug 29, 2013 at 11:07 Ozzy 8,32277 gold badges5757 silver badges9696 bronze badges asked Jul 30, 2012 at 1:35 James FJames F 55411 gold badge99 silver badges1919 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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

setInterval(doScroll, 500);

Working example http://jsfiddle/wrGnu/7/

You could also use the :eq(#) selector suffix to get the row of the table you want, and then scroll to that rows y-position or offset.

It would look Something like this but please note I have not tried/tested this particular code:

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

Here is a shorter version of the one written by Trinh Hoang Nhu. As he used jQuery which typically makes code longer and slower.

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

setInterval(doScroll, 500);

本文标签： javascriptScroll a div (containing a table) up one row at a timeStack Overflow