Wie blättere ich eine Zeile einer Tabelle in Sicht (element.scrollintoView) mit jQuery?

StackOverflow https://stackoverflow.com/questions/1805808

  •  05-07-2019
  •  | 
  •  

Frage

Ich füge dynamisch Zeilen in eine Tabelle mit jQuery. Die table ist in einem div die somit overflow:auto hat eine vertikale Bildlaufleiste verursacht.

Ich möchte jetzt meine Container div in die letzte Zeile zu Autoscroll. Was ist die jQuery-Version von tr.scrollintoView()?

War es hilfreich?

Lösung 

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

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

sollte es tun!

Andere Tipps

Dieser

Folgende funktioniert besser, wenn Sie auf einen beliebigen Punkt in der Liste scrollen müssen (und nicht immer nach unten): 

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());
  }
}

Plugin, das Rollen (mit Animation) nur bei Bedarf

habe ich geschrieben, um eine jQuery-Plugin , die genau das tut, was sagt es auf dem Zinn (und auch genau das, was Sie benötigen ). Die gute Sache ist, dass es nur Container bewegen wird, wenn das Element tatsächlich ausgeschaltet ist. Sonst wird kein Scrollen durchgeführt werden.

Es funktioniert so einfach wie folgt aus: 

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

Es findet automatisch am nächsten scrollbaren Vorfahren, die überschüssige Inhalt und zeigt Scrollbalken hat. Also, wenn ein anderer Vorfahr mit overflow:auto gibt es aber nicht scrollbaren übersprungen werden. Auf diese Weise brauchen Sie nicht rollbaren Element zu schaffen, weil manchmal Sie nicht einmal wissen, was man scrollbaren ist (ich dieses Plugin in meinem Sharepoint-Website bin mit dem Inhalt / Master ist Entwickler unabhängig, so dass es außerhalb meiner Kontrolle ist - HTML kann sich ändern wenn Website ist betriebsbereit, so dass Container scrollbaren).

viel einfacher: 

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

, wenn mehr als ein Einzelteil kehrt in dem Selektor, die get (0) wird nur das erste Element erhalten.

Dieses runnable Beispiel zeigt, wie ScrollIntoView () verwenden, die in allen modernen Browsern unterstützt wird: https://developer.mozilla.org/en-US /docs/Web/API/Element.scrollIntoView#Browser_Compatibility

Das folgende Beispiel verwendet jQuery das Element mit #yourid zu wählen. 

$( "#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>

var elem=jQuery(this);
elem[0].scrollIntoView(true);

Wenn Sie gerade blättern möchten, können Sie jQuery scrollTop Methode verwenden. http://docs.jquery.com/CSS/scrollTop 

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

So etwas vielleicht?

fand ich einen Fall (Überlauf div> table> tr> td), in der auf die relative Position der tr Scrollen funktioniert nicht. Stattdessen hatte ich den Überlaufbehälter (div) mit scrollTop blättern <tr>.offset().top - <table>.offset().top. Zum Beispiel: 

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

Same von oben mit wenig Änderung 

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>

$( "#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>

Ich konnte keinen Kommentar zu Abhijit Raos Antwort oben hinzufügen, so dass ich dies als eine zusätzliche Antwort vorlege.

Ich brauchte die Tabellenspalte blättern in den Blick auf eine große Tabelle haben, so dass ich hinzugefügt, um die Scroll-links-Funktionen in die Funktion. Als jemand erwähnt, springt er, wenn es rollt, aber es funktionierte für meine Zwecke. 

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());
  }
}
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top