Comment faire défiler une ligne d'une table dans la vue (l'élément.scrollintoView) à l'aide de jQuery?

Je suis dynamiquement ajouter des lignes à une table à l'aide de jQuery.
Le table est à l'intérieur d'un div qui a overflow:auto ainsi à l'origine d'une barre de défilement verticale.

Je veux maintenant autoscroll mon conteneur div à la dernière ligne. Quelle est la version de jQuery tr.scrollintoView()?

  • Comme par cette réponse, c'est apparemment un construit en fonction DOM pris en charge dans tous les principaux navigateurs. Simplement element.scrollIntoView() fonctionne.
InformationsquelleAutor Fuxi | 2009-11-26
  1. 75
    var rowpos = $('#table tr:last').position();

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

    devrait faire l'affaire!

    • J'ai trouvé un cas dans lequel cela n'a pas fonctionné comme prévu, a ajouté que la réponse ci-dessous à légèrement différent de la source.
    • Cela ne fonctionnera pas avec datatable nouveau fixed scrolling fonctionnalités/plugin.
    InformationsquelleAutor Gausie
  2. 84

    Cette suite fonctionne mieux si vous avez besoin de faire défiler à l'arbitraire d'un élément dans la liste (plutôt que de toujours vers le bas):

    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());
  }
}
    • Cela, monsieur, n'est pas juste une réponse, c'est une solution. Je vous remercie.
    • Vous pouvez supprimer l'argument de conteneur et de le remplacer avec var conteneur = élément.offsetParent;...
    • Qui ne fonctionne que si le défilement de l'élément est le parent direct de l'enfant de l'objet. Une solution plus robuste serait pour itérer jusqu'à son ascendance jusqu'à ce qu'il trouve un élément où .css("overflow") renvoie "auto" ou "arrêt".
    • ne devrait pas votre quatrième ligne var elemTop = element.get(0).offsetTop ? Le code ne fonctionne pas jusqu'à ce que je faisais.
    • Aussi viens de découvrir le Safari/Chrome défiler le conteneur ainsi que l'ensemble de la page. Quelqu'un connais un moyen d'empêcher ça?
    • Devrait la ligne 3 de cette fonction: var elemTop = element.offsetTop; être changé à var elemTop = $(element).offset().haut; ?
    • Bien que cette solution fonctionne presque, il a de graves problèmes. L'un est de la faute de frappe, mais plus grave est le fait qu'elle ne traite pas avec élégance avec des articles qui ont toute la hauteur. La meilleure solution est le plugin à partir de @Robert Koritnik

    InformationsquelleAutor Abhijit Rao
  3. 29

    Plugin qui permet de faire défiler (avec animation) que lorsque c'est nécessaire

    J'ai écrit un plugin jQuery qui fait exactement ce qu'il indique sur l'étain (et aussi exactement ce que vous avez besoin de). La bonne chose est qu'il ne défilement conteneur lorsque l'élément est en fait hors. Sinon, pas de défilement sera effectuée.

    Il fonctionne aussi facile que cela:

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

    Il trouve automatiquement plus proche de défilement ancêtre qui dispose d'un excédent de contenu et montre des barres de défilement. Donc si il y a un autre ancêtre avec overflow:auto mais n'est pas défilement sera ignoré. De cette façon, vous n'avez pas besoin de fournir de l'élément déroulant parce que parfois vous ne savez même pas qui on est scrollable (je suis en utilisant ce plugin dans mon site Sharepoint où le contenu/maître est développeur indépendant, il est donc hors de mon contrôle, - HTML peut changer lorsque le site est opérationnel, donc peut défilement des conteneurs).

    • Cela vraiment fonctionne. Essayé de corriger la une de @Abhijit Rao pour travailler, mais il a beaucoup de problèmes. Celui-ci fonctionne.
    • Mais être informé que je dois le mettre à jour pour fonctionner correctement avec jQuery 1.8+ Personnalisé sélecteur de définition doit être fait différemment avec 1.8+.
    • Eu le plugin à partir de GitHub et fonctionne comme promis. Excellent travail!
    • quatre ans depuis la mise à jour de ce plugin fonctionne toujours comme un charme. Je l'ai utilisé dans angulaire de la directive 🙂
    • Quatre ans plus tard, le plugin ne fonctionne pas pour moi, parfois manque la marque auprès de sa cible, mais pas dans la vue. Aujourd'hui, si la cible n'est qu'un élément, je l'utilise javascript: var target = $(selector); target.get(0).scrollIntoView();
    • Pour moi, le plugin ne fonctionne pas avec jQuery 2.2.2.
    • La meilleure solution! Clair, simple et élégant.

    InformationsquelleAutor Robert Koritnik
  4. 18

    beaucoup plus simple:

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

    si plus d'un élément renvoie dans le sélecteur, le get(0) afin d'obtenir uniquement le premier élément.

    • cela aurait un impact sur la vitesse de défilement de la page. Donc il ne serait pas travailler.
    • Ce n'est pas faire de l'animation, elle ne traite défilement à l'intérieur d'un div scrollable.
    • Ce n'est pas faire de l'animation, mais je trouve que l'animation des solutions à défaut dans mon cas d'utilisation particulier qui a une incroyable longueur de l'élément. L'animation des solutions parfois manquer la marque par un petit décalage. @Mark0978 mon cas d'utilisation est un défilement div--je ne sais pas pourquoi cela fonctionne dans mon cas, mais pas le vôtre
    InformationsquelleAutor Mor Shemesh
  5. 5

    Ce praticable exemple montre comment utiliser scrollIntoView() qui est pris en charge dans tous les navigateurs modernes:
    https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollIntoView#Browser_Compatibility

    L'exemple ci-dessous utilise jQuery pour sélectionner l'élément avec #yourid.

    JS:

    $( "#yourid" )[0].scrollIntoView();

    HTML:

    <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>

    InformationsquelleAutor Barry Staes
  6. 3
    var elem=jQuery(this);
elem[0].scrollIntoView(true);
    • Ne serait pas this.scrollIntoView(true) être beaucoup plus simple?
    • la réponse donnée est la seule chose qui a fonctionné pour moi
    InformationsquelleAutor zuckerhut
  7. 2

    Si vous voulez juste pour faire défiler, vous pouvez utiliser du jQuery scrollTop méthode. http://docs.jquery.com/CSS/scrollTop

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

    Quelque chose comme ça peut-être?

    InformationsquelleAutor William
  8. 2

    J'ai trouvé un cas (débordement div > table > tr > td) dans lequel le défilement de la position relative de la tr ne fonctionne pas. Au lieu de cela, j'ai dû faire défiler le déversoir (div) à l'aide de scrollTop à <tr>.offset().top - <table>.offset().top. Par exemple:

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

    Même à partir de ci-dessus avec peu de modifications,

    JS:

    function focusMe() {
       var rowpos = $('#FocusME').position();
        rowpos.top = rowpos.top - 30;
        $('#container').scrollTop(rowpos.top);
    }

    HTML:

    <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>

    InformationsquelleAutor Arun Prasad E S
  10. 0

    JS:

    $( "#yourid" )[0].scrollIntoView();

    HTML:

    <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>

    • Fait défiler la page entière et est littéralement une copie de la réponse de @BarryStaes
    InformationsquelleAutor Ajay Ram
  11. 0

    Je n'arrivais pas à ajouter un commentaire à Abhijit Rao réponse ci-dessus, de sorte que je présente cela comme une réponse supplémentaire.

    J'avais besoin d'avoir la colonne du tableau de défilement en vue sur une grande table, j'ai donc ajouté le faites défiler vers la gauche caractéristiques dans le fonction. Comme quelqu'un l'a mentionné, il saute quand il défile, mais cela a fonctionné pour mes fins.

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