¿Cómo desplazo una fila de una tabla a la vista (element.scrollintoView) usando jQuery?

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

  •  05-07-2019
  •  | 
  •  

Pregunta

Estoy agregando dinámicamente filas a una tabla usando jQuery. El table está dentro de un div que tiene overflow:auto causando una barra de desplazamiento vertical.

Ahora quiero desplazar automáticamente mi contenedor tr.scrollintoView() a la última fila. ¿Cuál es la versión jQuery de <=>?

¿Fue útil?

Solución 

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

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

debería hacer el truco!

Otros consejos

Lo siguiente funciona mejor si necesita desplazarse a un elemento arbitrario en la lista (en lugar de siempre al final): 

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

Complemento que se desplaza (con animación) solo cuando es necesario

He escrito un jQuery plugin que hace exactamente lo que dice en la lata (y también exactamente lo que necesita ). Lo bueno es que solo se desplazará el contenedor cuando el elemento esté realmente apagado. De lo contrario, no se realizará ningún desplazamiento.

Funciona tan fácil como esto: 

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

Encuentra automáticamente el ancestro desplazable más cercano que tiene contenido en exceso y muestra barras de desplazamiento. Entonces, si hay otro antepasado con overflow:auto pero no es desplazable, se omitirá. De esta manera, no necesita proporcionar elementos desplazables porque a veces ni siquiera sabe cuál es desplazable (estoy usando este complemento en mi sitio de Sharepoint donde el contenido / maestro es independiente del desarrollador, por lo que está fuera de mi control; HTML puede cambiar cuando el sitio está operativo, también los contenedores desplazables).

mucho más simple: 

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

si más de un elemento regresa en el selector, el get (0) obtendrá solo el primer elemento.

Este ejemplo ejecutable muestra cómo usar scrollIntoView () que es compatible con todos los navegadores modernos: https://developer.mozilla.org/en-US /docs/Web/API/Element.scrollIntoView#Browser_Compatibility

El siguiente ejemplo usa jQuery para seleccionar el elemento con #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 solo desea desplazarse, puede utilizar el método scrollTop de jQuery. http://docs.jquery.com/CSS/scrollTop 

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

¿Algo así, tal vez?

Encontré un caso (overflow div > table > tr > td) en el que el desplazamiento a la posición relativa del tr no funciona. En cambio, tuve que desplazar el contenedor de desbordamiento (div) usando scrollTop a <tr>.offset().top - <table>.offset().top. Por ejemplo: 

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

Lo mismo de arriba con poca modificación 

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>

No pude agregar un comentario a la respuesta de Abhijit Rao anterior, así que lo envío como una respuesta adicional.

Necesitaba que la columna de la tabla se desplazara a la vista en una tabla ancha, así que agregué las funciones de desplazamiento a la izquierda en la función. Como alguien mencionó, salta cuando se desplaza, pero funcionó para mis propósitos. 

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());
  }
}
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top