滾動條問題

Question

我有這個音樂播放器，我買了。這是非常基本的，所以我一直在修改它以匹配我的頁面。我有一個我無法修復的主要問題：滾動條。當我按下我的音樂播放器上的播放時，滾動條將不會跟隨播放列表，因此當您轉到下一首歌曲時，什麼都不會發生，音樂播放器也不會移動。我嘗試使用動畫腳本修復該問題，該腳本在按下下一個按鈕和上一個按鈕時上下移動滾動（這可以正常工作，直到到達底部，然後它不會返回頂部並從頭開始）您可以看到以http://www.jeejuh.com/爲例。他的音樂播放器獲得了我正在尋找的東西：您可以滾動瀏覽它，當您到達底部時，它會返回頂部。

這是我正在使用的動畫腳本和id的頂部（是下一個按鈕）的權利（是以前的按鈕）。我不使用其他的，但沒有這些腳本不會工作的部分。

<script type="text/javascript">//<![CDATA[ 
$(window).load(function(){ 
$('#top').click(function() { 
    var leftPos = $('div.componentPlaylist').scrollTop(); 
    console.log(leftPos);  
    $("div.componentPlaylist").animate({ 
     scrollTop: leftPos - 25 
    }, 1); 
}); 

$('#right').click(function() { 
    var leftPos = $('div.componentPlaylist').scrollTop(); 
    console.log(leftPos); 
    $("div.componentPlaylist").animate({ 
     scrollTop: leftPos + 25 
    }, 1); 

    $('#left').click(function() { 
    var leftPos = $('div.componentPlaylist').scrollTop(); 
    console.log(leftPos);  
    $("div.componentPlaylis").animate({ 
     scrollTop: leftPos - 25 
    }, 1); 
}); 

$('#bottom').click(function() { 
    var leftPos = $('div.componentPlaylistt').scrollTop(); 
    console.log(leftPos); 
    $("div.componentPlaylist").animate({ 
     scrollTop: leftPos + 25 
    }, 1); 

}); 

}); 
}); 
//]]> 

我的測試網站是menyfaces.com，我的參考模型http://www.jeejuh.com/

注：我沒有使用一個表，我使用的是變成一個順序列表

的API我會感謝任何幫助，它已經2個月，沒有解決方案。

Answer 1

沒有必要使用prev-next按鈕來處理音樂更改事件 - 效率低下，因爲歌曲是逐個播放的，您必須滾動到當前播放的歌曲。您應該處理跟蹤更改事件以獲取當前播放曲目（需要播放器API），檢查它是否可見，如果不可以，請滾動至該曲目。

function scrollToTrack(track){ 
    var container = $('div.componentPlaylist'); 
    if(track.position().top < 0){ 
     container.scrollTop(container.scrollTop() + track.position().top); 
    } else if(track.position().top + track.height() > container.height()){ 
     container.scrollTop(container.scrollTop() + track.position().top 
      + track.height() - container.height()); 
    } 
} 

scrollToTrack(jQuery('.playlistSelected').parent('li')); 

播放任何歌曲，然後將播放列表滾動到當前歌曲不可見的位置，然後在控制檯中運行上面的代碼。