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

Question

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 jusqu'à la dernière ligne. Quelle est la version jQuery de tr.scrollintoView() ?

THX

Answer 1

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

Answer 2

Should do the trick!

Answer 3

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 dont vous avez besoin). 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).

Answer 4

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.

Answer 5

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?