web-dev-qa-db-ja.com

jQueryを使用してテーブルの行をビュー（element.scrollintoView）にスクロールするにはどうすればよいですか？

JQueryを使用してテーブルに行を動的に追加しています。 tableは、div内にあり、_overflow:auto_があるため、垂直スクロールバーが発生します。

コンテナdivを最後の行に自動スクロールしたいと思います。 tr.scrollintoView()のjQueryバージョンは何ですか？

jqueryscroll
72
Fuxi
var rowpos = $('#table tr:last').position();

$('#container').scrollTop(rowpos.top);

トリックを行う必要があります！

75
Gausie

リストの任意の項目にスクロールする必要がある場合（常に最下部にスクロールするのではなく）、次のようにするとうまく機能します。

function scrollIntoView(element, container) {
  var containerTop = $(container).scrollTop(); 
  var containerBottom = containerTop + $(container).height(); 
  var elemTop = element.offsetTop;
  var elemBottom = elemTop + $(element).height(); 
  if (elemTop < containerTop) {
    $(container).scrollTop(elemTop);
  } else if (elemBottom > containerBottom) {
    $(container).scrollTop(elemBottom - $(container).height());
  }
}
84
Abhijit Rao

必要な場合にのみ（アニメーション付きで）スクロールするプラグイン

私は jQueryプラグイン を書きました。これはブリキで正確に言うことをします（そしてまさにあなたが必要とするもの）。良い点は、要素が実際にオフの場合にのみコンテナをスクロールすることです。それ以外の場合、スクロールは実行されません。

これは次のように簡単に機能します。

$("table tr:last").scrollintoview();

過剰なコンテンツを持ち、スクロールバーを表示している最も近いスクロール可能な祖先を自動的に見つけます。そのため、overflow:autoを持つ別の祖先があるが、スクロール可能でない場合はスキップされます。この方法では、スクロール可能な要素を提供する必要がないため、スクロール可能な要素がわからない場合もあります（コンテンツ/マスターが開発者に依存しないSharepointサイトでこのプラグインを使用しているため、HTMLを変更できます）サイトが稼働しているため、スクロール可能なコンテナを使用できます）。

29
Robert Koritnik

より簡単：

$("selector for element").get(0).scrollIntoView();

セレクターで複数のアイテムが返される場合、get（0）は最初のアイテムのみを取得します。

18
Mor Shemesh

この実行可能な例は、すべての最新ブラウザーでサポートされているscrollIntoView（）の使用方法を示しています。 https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollIntoView#Browser_Compatibility

次の例では、jQueryを使用して_#yourid_で要素を選択します。

$( "#yourid" )[0].scrollIntoView();
_<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p id="yourid">Hello world.</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>_
5
Barry Staes
var elem=jQuery(this);
elem[0].scrollIntoView(true);
3
zuckerhut

スクロールしたいだけなら、jQueryのscrollTopメソッドを使用できます。 http://docs.jquery.com/CSS/scrollTop


var table = jQuery( 'table' );
table.scrollTop( table.find( 'tr:last' ).scrollTop() );

たぶんそのような何か？

2
William

上と同じ、ほとんど変更なし

function focusMe() {
       var rowpos = $('#FocusME').position();
        rowpos.top = rowpos.top - 30;
        $('#container').scrollTop(rowpos.top);
    }
<html>
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<body>
    <input type="button" onclick="focusMe()" value="focus">
    <div id="container" style="max-height:200px;overflow:scroll;">
        <table>
            <tr>
                <td>1</td>
                <td></td>
            </tr>
            <tr>
                <td>2</td>
                <td></td>
            </tr>
            <tr>
                <td>3</td>
                <td></td>
            </tr>
            <tr>
                <td>4</td>
                <td></td>
            </tr>
            <tr>
                <td>5</td>
                <td></td>
            </tr>
            <tr>
                <td>6</td>
                <td></td>
            </tr>
            <tr>
                <td>7</td>
                <td></td>
            </tr>
            <tr>
                <td>8</td>
                <td></td>
            </tr>
            <tr>
                <td>9</td>
                <td></td>
            </tr>
            <tr id="FocusME">
                <td>10</td>
                <td></td>
            </tr>
            <tr>
                <td>11</td>
                <td></td>
            </tr>
            <tr>
                <td>12</td>
                <td></td>
            </tr>
            <tr>
                <td>13</td>
                <td></td>
            </tr>
            <tr>
                <td>14</td>
                <td></td>
            </tr>
            <tr>
                <td>15</td>
                <td></td>
            </tr>
            <tr>
                <td>16</td>
                <td></td>
            </tr>
            <tr>
                <td>17</td>
                <td></td>
            </tr>
            <tr>
                <td>18</td>
                <td></td>
            </tr>
            <tr>
                <td>19</td>
                <td></td>
            </tr>
            <tr>
                <td>20</td>
                <td></td>
            </tr>
        </table>
    </div>
</body>

</html>
2
Arun Prasad E S

Trの相対位置へのスクロールが機能しないケース（オーバーフローdiv>テーブル> tr> td）が見つかりました。代わりに、scrollTopを使用してオーバーフローコンテナ（div）を<tr>.offset().top - <table>.offset().topにスクロールする必要がありました。例えば：

$('#container').scrollTop( $('#tr').offset().top - $('#td').offset().top )
2
user1338062

上記のAbhijit Raoの回答にコメントを追加できなかったため、これを追加の回答として提出しています。

テーブルの列を幅の広いテーブルのビューにスクロールする必要があるため、左スクロール機能を関数に追加しました。誰かが言ったように、スクロールするとジャンプしますが、私の目的には役立ちました。

function scrollIntoView(element, container) {
  var containerTop = $(container).scrollTop();
  var containerLeft = $(container).scrollLeft();
  var containerBottom = containerTop + $(container).height();
  var containerRight = containerLeft + $(container).width();

  var elemTop = element.offsetTop;
  var elemLeft = element.offsetLeft;
  var elemBottom = elemTop + $(element).height();
  var elemRight = elemLeft + $(element).width();

  if (elemTop < containerTop) {
    $(container).scrollTop(elemTop);
  } else if (elemBottom > containerBottom) {
    $(container).scrollTop(elemBottom - $(container).height());
  }

  if(elemLeft < containerLeft) {
    $(container).scrollLeft(elemLeft);
  } else if(elemRight > containerRight) {
    $(container).scrollLeft(elemRight - $(container).width());
  }
}
0
wuijin
$( "#yourid" )[0].scrollIntoView();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p id="yourid">Hello world.</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
0
Ajay Ram