한 번에 한 행 위로 div (테이블 포함) 스크롤하십시오.

가사가 포함 된 표가 있습니다. 평균적으로 곡의 길이는 30 줄 정도이지만 한 번에 모든 페이지를 표시하지 않으므로 overflow : scroll 속성을 사용하여 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'를 보여주는 또 다른 행 보여주는 3 가지 형태의 가사 : 노래의 원래 언어, 음역 및 다른 언어로의 번역).

출처

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)는 ... –

은 참으로이 권리입니다. 내 구현을 봐 http://jsfiddle.net/wrGnu/10/ – ama2

감사합니다. 10px (Trinh) 또는 1px (ama2)를 사용하는 대신 첫 번째 행 (row_0)의 offsetHeight를 가져 와서 스크롤 할 수 있습니다. –

당신은 또한 사용할 수 있습니다 당신이 원하는 테이블의 행을 얻기 위해 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

이 코드를 프로덕션 환경에서 사용했지만 아주 잘 작동합니다. –

은 트린 호앙 Nhu는 쓴 일의 짧은 버전입니다. 그가 jQuery을 사용했기 때문에 일반적으로 코드가 길어지고 느려집니다.

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

setInterval(doScroll, 500);

당신은 당신이 필요로하는 것을 얻기 위해 몇 가지 PARAMS을 조정해야합니다

출처

2012-07-30 04:58:43

한 번에 한 행 위로 div (테이블 포함) 스크롤하십시오.

답변

관련 문제