scrolling - scrollintoview offset jquery
¿Cómo desplazo una fila de una tabla a la vista(elemento.scrollintoView) usando jQuery? (11)
Estoy agregando dinámicamente filas a una tabla usando jQuery. La table está dentro de un div que tiene un overflow:auto lo que causa una barra de desplazamiento vertical.
Ahora quiero desplazar automáticamente mi div contenedor a la última fila. ¿Cuál es la versión de jQuery de tr.scrollintoView() ?
Complemento que se desplaza (con animación) solo cuando es necesario
Escribí un complemento de jQuery que hace exactamente lo que dice en la lata (y también exactamente lo que necesita ). Lo bueno es que solo desplazará el contenedor cuando el elemento esté desactivado. 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 exceso de contenido y muestra barras de desplazamiento. Entonces, si hay otro ancestro con overflow:auto pero no se puede desplazar, se saltará. De esta forma no es necesario que proporciones elementos desplazables porque a veces ni siquiera sabes cuál es desplazable (estoy usando este complemento en mi sitio Sharepoint donde el contenido / máster es independiente del desarrollador, por lo que está fuera de mi control; el HTML puede cambiar cuando el sitio está operativo también pueden los contenedores desplazables).
Encontré un caso (overflow div> table> tr> td) en el cual 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 . P.ej:
$(''#container'').scrollTop( $(''#tr'').offset().top - $(''#td'').offset().top )
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>
Este 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());
}
}
Lo mismo desde 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>
No pude agregar un comentario a la respuesta de Abhijit Rao, por lo que lo enviaré como una respuesta adicional.
Necesitaba hacer que la columna de la tabla se desplazara a la vista en una amplia mesa, 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());
}
}
Si solo desea desplazarse, puede usar el método scrollTop de jQuery. http://docs.jquery.com/CSS/scrollTop
var table = jQuery( ''table'' ); table.scrollTop( table.find( ''tr:last'' ).scrollTop() );
Algo como eso tal vez?
mucho más simple:
$("selector for element").get(0).scrollIntoView();
si vuelve más de un ítem en el selector, el get (0) obtendrá solo el primer ítem.
$( "#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);
var rowpos = $(''#table tr:last'').position();
$(''#container'').scrollTop(rowpos.top);
debería hacer el truco!