Come scorrere una riga di una tabella nella vista (element.scrollintoView) usando jQuery?

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

  •  05-07-2019
  •  | 
  •  

Domanda

Sto aggiungendo dinamicamente le righe a una tabella usando jQuery. Il table è all'interno di un div che ha overflow:auto causando così una barra di scorrimento verticale.

Ora voglio scorrere automaticamente il mio contenitore tr.scrollintoView() sull'ultima riga. Qual è la versione jQuery di <=>?

È stato utile?

Soluzione 

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

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

dovrebbe fare il trucco!

Altri suggerimenti

Ciò che segue funziona meglio se è necessario scorrere fino a un elemento arbitrario nell'elenco (anziché sempre in fondo): 

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

Plug-in che scorre (con animazione) solo quando richiesto

Ho scritto un plugin jQuery che fa esattamente ciò che dice sulla scatola (e anche esattamente ciò di cui hai bisogno ). La cosa buona è che scorrerà il contenitore solo quando l'elemento è effettivamente spento. Altrimenti non verrà eseguito lo scorrimento.

Funziona così facilmente: 

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

Trova automaticamente l'antenato più vicino a scorrimento che ha un contenuto in eccesso e mostra barre di scorrimento. Quindi se c'è un altro antenato con overflow:auto ma non è scorrevole verrà ignorato. In questo modo non è necessario fornire elementi scorrevoli perché a volte non si sa nemmeno quale sia scorrevole (sto usando questo plugin nel mio sito Sharepoint in cui il contenuto / master è indipendente dallo sviluppatore, quindi è fuori dal mio controllo - HTML può cambiare quando il sito è operativo, così possono essere contenitori scorrevoli).

molto più semplice: 

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

se più di un elemento ritorna nel selettore, get (0) otterrà solo il primo elemento.

Questo esempio eseguibile mostra come usare scrollIntoView () che è supportato in tutti i browser moderni: https://developer.mozilla.org/en-US /docs/Web/API/Element.scrollIntoView#Browser_Compatibility

L'esempio seguente utilizza jQuery per selezionare l'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);

Se vuoi solo scorrere, puoi usare il metodo scrollTop di jQuery. http://docs.jquery.com/CSS/scrollTop 

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

Qualcosa del genere forse?

Ho trovato un caso (overflow div > tabella > tr > td) in cui lo scorrimento fino alla posizione relativa di tr non funziona. Invece, ho dovuto scorrere il contenitore di overflow (div) usando scrollTop fino a <tr>.offset().top - <table>.offset().top. Ad esempio: 

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

Come sopra con piccole modifiche 

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>

Non ho potuto aggiungere un commento alla risposta di Abhijit Rao sopra, quindi lo sto inviando come risposta aggiuntiva.

Avevo bisogno di far scorrere la colonna della tabella in vista su una tabella ampia, quindi ho aggiunto le funzioni di scorrimento a sinistra nella funzione. Come qualcuno ha detto, salta quando scorre, ma ha funzionato per i miei scopi. 

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());
  }
}
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top