Como faço para rolar uma linha de uma tabela na vista (element.scrollintoView) usando jQuery?

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

  •  05-07-2019
  •  | 
  •  

Pergunta

Estou dinamicamente adicionando linhas a uma tabela usando jQuery. O table está dentro de um div que tem overflow:auto causando, assim, um deslocamento vertical.

Agora quero autoscroll meu recipiente div para a última linha. Qual é a versão jQuery de tr.scrollintoView()?

Foi útil?

Solução 

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

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

deve fazer o truque!

Outras dicas

Este seguinte funciona melhor se você precisa para se deslocar para um item arbitrário na lista (ao invés de sempre para a parte inferior): 

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

Plugin que rola (com animação) apenas quando necessário

Eu escrevi um plugin jQuery que faz exatamente o que diz na lata (e também exatamente o que você precisa ). A coisa boa é que ele recipiente só irá rolar quando o elemento é realmente off. Caso contrário, nenhuma rolagem será executada.

Ele funciona tão simples como isto: 

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

Ele encontra automaticamente mais próximo ancestral de rolagem que tem excesso de conteúdo e está mostrando barras de rolagem. Então, se há um outro ancestral com overflow:auto mas não é rolagem será ignorado. Desta forma, você não precisa fornecer elemento de rolagem, porque às vezes você nem sabe qual é scrollable (estou usando este plugin no meu site do SharePoint onde o conteúdo / master é desenvolvedor independente por isso é além do meu controle - HTML pode mudar quando o site é tão operacional pode sCROLLABLE recipientes).

muito mais simples: 

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

Se mais de um item de devolução no seletor, o get (0) receberá apenas o primeiro item.

Este exemplo executáveis ??mostra como usar scrollIntoView () que é suportado em todos os navegadores modernos: https://developer.mozilla.org/en-US /docs/Web/API/Element.scrollIntoView#Browser_Compatibility

O exemplo abaixo usa jQuery para selecionar o elemento com #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);

Se você quiser apenas para rolar, você poderia usar o método scrollTop do jQuery. http://docs.jquery.com/CSS/scrollTop 

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

Algo assim, talvez?

Eu encontrei um caso (estouro div> table> tr> td), no qual a rolagem para a posição relativa do tr não funciona. Em vez disso, eu tinha que rolar o recipiente de transbordo (div) usando scrollTop para <tr>.offset().top - <table>.offset().top. Por exemplo: 

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

Mesmo de cima com pouca modificação 

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>

Eu não poderia adicionar um comentário à resposta de Abhijit Rao acima, então eu estou submetendo isso como uma resposta adicional.

eu precisava ter o pergaminho coluna da tabela na vista em uma ampla mesa, então eu adicionei o deslocamento para a esquerda características para a função. Como alguém mencionou, ele salta quando se desloca, mas funcionou para os meus 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 em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top