web-dev-qa-db-fra.com

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

J'ajoute dynamiquement des lignes à une table à l'aide de jQuery. Le table est à l'intérieur d'un div qui a overflow:auto, Provoquant ainsi une barre de défilement verticale.

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

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

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

devrait faire l'affaire!

75
Gausie

Ce qui suit 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());
  }
}
84
Abhijit Rao

Plugin qui défile (avec animation) uniquement si nécessaire

J'ai écrit un plugin jQuery qui fait exactement ce qu'il dit sur l'étain (et aussi exactement ce dont vous avez besoin ). La bonne chose est que cela 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 facilement 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 ne pouvant pas défiler sera ignoré. De cette façon, vous n'avez pas besoin de fournir un élément scrollable, car parfois vous ne savez 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).

29
Robert Koritnik

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.

18
Mor Shemesh

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>
5
Barry Staes
var elem=jQuery(this);
elem[0].scrollIntoView(true);
3
zuckerhut

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?

2
William

Idem d'en haut avec peu de modification

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

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 )
2
user1338062

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

J'avais besoin de faire défiler la colonne de table pour l'afficher dans une grande table. 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 mes besoins.

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