0

この小さなボタンをクリックすると、新しいテーブル行が追加され、jQuery を使用して新しく追加された行にスムーズにスクロールします。

ここで例を作成しましたhttp://jsfiddle.net/2EBNH/

これは私のコードの簡略化されたバージョンであることに注意してください。実際のものでは、テーブル内のどこにでも行を追加できます (最後の行である必要はありません)。

しかし、一番下までスクロールしても、コードは機能しません。私が想定する最初の10行で機能しますが、さらに行を追加すると、位置/オフセット（両方を試しました）が正しくないようです。

テストするには、15 行以上を追加するだけで、結果が表示されます。

ボタンをクリックした後、毎回スクロールバーを一番上に移動すると、何とか機能しているように見えます。

ありがとうございました

4

1 に答える 1

2

これが機能しない理由は次のとおりです。

position() メソッドは、ウィンドウの上部までの相対距離を返します。div のサイズを制限したため、ウィンドウの上部までの距離は、必ずしもそれに対して測定したいものではありませんが、それを含む div に対するオフセットに対して測定する必要があります。

つまり、スクロールが上にあり、新しい要素を追加すると (下に移動します)、ウィンドウに対するオフセット/位置は、スクロールするピクセルの量と同じになるため、そのときに機能します。ただし、既に下までスクロールしている場合、要素とウィンドウの上部との間の距離は 100 ピクセル (div の高さ) 程度なので、100 ピクセルまでスクロールします。つまり、実際に上がります。

ScrollTo jQuery プラグインのチェックに興味があるかもしれません:

var rownum = 1;
$('input').click(function () {
    $('table').append('<tr id=row-' + rownum + '><td>' + rownum + ': row</td></tr>');
    $('#row-' + rownum).ScrollTo({
        duration: 400,
        easing: 'linear'
    });
    rownum++;
});​

これがプラグインを使用したフィドルです

プラグインを使用しない場合の解決策を次に示します (ここに jsfiddle を示します)。

var rownum = 1;
$('input').click(function () {
    $('table').append('<tr id=row-' + rownum + '><td>' + rownum + ': row</td></tr>');
    var $row = $('#row-' + rownum);
    var topOffset = $row.parent().parent().parent().scrollTop() + $row.position().top;
    $('div').animate({scrollTop: topOffset + "px"}, 400);
    rownum++;
});​
于 2012-10-05T06:37:59.933 に答える