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

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

  •  05-07-2019
  •  | 
  •  

Question

J'ajoute dynamiquement des lignes à une table à l'aide de jQuery. Le table se trouve dans un div qui a overflow:auto une barre de défilement verticale.

Je souhaite maintenant faire défiler automatiquement mon conteneur tr.scrollintoView() jusqu'à la dernière ligne. Quelle est la version jQuery de <=>?

Était-ce utile?

La solution 

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

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

devrait faire l'affaire!

Autres conseils

Cette suite fonctionne mieux si vous devez faire défiler un élément arbitraire de la liste (plutôt que 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());
  }
}

Plug-in qui défile (avec animation) uniquement si nécessaire

J'ai écrit un plug-in jQuery qui fait exactement ce qui est écrit (et exactement ce dont vous avez besoin ). La bonne chose est qu'il ne fera défiler le conteneur que lorsque l'élément est réellement désactivé. Sinon, aucun défilement ne sera effectué.

Cela fonctionne aussi simplement que cela: 

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

Il trouve automatiquement l’ancêtre défilant le plus proche qui a un contenu excessif et affiche des barres de défilement. Donc, s'il y a un autre ancêtre avec overflow:auto mais sans défilement, il sera ignoré. De cette façon, vous n'avez pas besoin de fournir un élément scrollable, car vous ne savez parfois même pas lequel est scrollable (j'utilise ce plugin dans mon site Sharepoint où content / master est indépendant du développeur, donc cela échappe à mon contrôle - HTML peut changer lorsque le site est opérationnel, les conteneurs peuvent également défiler).

beaucoup plus simple: 

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

si plusieurs éléments sont renvoyés dans le sélecteur, get (0) obtiendra uniquement le premier élément.

Cet exemple exécutable montre comment utiliser scrollIntoView (), pris en charge par 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. 

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

Si vous souhaitez simplement faire défiler, vous pouvez utiliser la méthode scrollTop de jQuery. http://docs.jquery.com/CSS/scrollTop 

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

Quelque chose comme ça peut-être?

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

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

Idem par le haut avec peu de modifications 

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>

Je ne pouvais pas ajouter de commentaire à la réponse d'Abhijit Rao ci-dessus, je le soumets donc en guise de réponse supplémentaire.

J'avais besoin de faire défiler la colonne de la table pour l'afficher dans une table large. J'ai donc ajouté les fonctions de défilement gauche à la fonction. Comme quelqu'un l'a mentionné, il saute quand il défile, mais cela a fonctionné pour moi. 

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());
  }
}
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top