每次滾動一個div（包含一個表格）一行一行

我有一個包含歌詞的表格。平均來說，歌曲有30行左右，但我不希望它們都一次顯示在頁面上，所以我把表格放在屬性溢出的div中：滾動。每次滾動一個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' 和另一行顯示歌詞有三種不同的形式：歌曲的原始語言，音譯和翻譯成另一種語言）。

來源

2012-07-30 James F

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

setInterval(doScroll, 500);

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

來源

2012-07-30 01:43:30

你將不得不調整一些參數來得到你所需要的，EX：10到一行的高度...... – 2012-07-30 01:44:23

是的這是正確的。看看我的實施http://jsfiddle.net/wrGnu/10/ – ama2 2012-07-30 01:49:11

謝謝。而不是使用10px（Trinh）或1px（ama2）我想我可以得到第一行（row_0）的offsetHeight並通過滾動。 – 2012-07-30 02:17:50

你也可以使用：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-30 03:17:01 Ozzy

我在生產中使用這個代碼，它工作得非常好。 – 2017-07-26 16:32:07

這裏是一個由鄭氏晃新和成書面的短版。當他使用時，jQuery通常會使代碼更長更慢。

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

setInterval(doScroll, 500);

來源

2012-07-30 04:58:43

每次滾動一個div（包含一個表格）一行一行

回答

相關問題