スクロール

Question

私は00:00から午前7時まで<tr>タグを非表示にすると、ページが午前8時から私のテーブルのショーをロードするときしかし、私は持っていたいテーブル

<table> 
    <tr><td>00:00</td><td>Text1</td></td> 
    . 
    . 
    <tr><td>23:00</td><td>Text23</td></td> 
</table> 

を持っていますテーブルの最初の要素にスクロールする可能性があります。私はjQuery用に別のプラグインを使用しようとしましたが、失敗しました。何か案は？

Answer 1

はhttp://jsfiddle.net/qm7Vx/

はちょうどあなたが望むものに高さを変更...スクロール可能なdivの中にテーブルを入れてみてください。水平方向にもスクロールしたい場合は、widthプロパティをスタイル属性に追加することもできます。

<div style="height:200px;overflow:auto;" id="tableScroller"> 
    <table> 
    <tr><td>00:00</td><td>Text1</td></td> 
    . 
    . 
    <tr><td>23:00</td><td>Text23</td></td> 
    </table> 
</div> 

これは、下にスクロールする機能を備えた高さに応じて、最初のN行を表示します。スクロールアップ機能を備えた最後のN行を表示するように思えます。行の表示順序を逆にして、最新のものを最初に表示することをお勧めしますか？

の場合は、jQueryを使用してdivのスクロール位置を設定できます。

$('#tableScroller').scrollTop($('#tableScroller table').height()); 

Answer 2

必要はありませんプラグインは、ちょうどスクロール可能なコンテナ内のテーブルを置き、次のコードセットのようなものを使用します。

HTML：

<div id="tableContainer" style="height:200px; overflow:auto;"> 
    <table> 
     <tr><td>00:00</td><td>Text1</td></td> 
     . 
     . 
     <tr><td>23:00</td><td>Text23</td></td> 
    </table> 
</div> 

のjQuery：

$(document).ready(function(){ 
    var howMuchToScroll = $('div#tableContainer table td:contains("08:00")').offset().top - $('div#tableContainer table').offset().top; 
    $('div#tableContainer').scrollTop(howMuchToScroll); 
}); 

このスクリプトでは、任意の時間に自動的にスクロールすることができます（この場合は08:00）、さらに下にスクロールできると仮定して上記の項目を非表示にします。また、適切な高さを選択すると、後で隠れるようになります。

次の作業デモを参照してください。jsFiddle