Lo scorrimento è Tracimato Div con JavaScript

Question

Ho un div che utilizza overflow:auto per mantenere il contenuto all'interno del div, come si è ridimensionata e trascinato intorno alla pagina.Sto utilizzando alcuni ajax per recuperare le righe di testo dal server, quindi aggiungerli alla fine del div, in modo che il contenuto è in crescita verso il basso.Ogni volta che questo succede, mi piacerebbe usare JS per far scorrere il div per il fondo in modo più recentemente aggiunto il contenuto è visibile, simile al modo in una stanza di chat o console a riga di comando dovrebbe funzionare.

Finora ho usato questo frammento di codice per farlo (sto usando jQuery, quindi il $ funzione ()):

$("#thediv").scrollTop = $("#thediv").scrollHeight;

Tuttavia è stato mi dà risultati incoerenti.A volte funziona, a volte no, ed è completamente cessa di funzionare se l'utente ridimensiona il div o si sposta la barra di scorrimento manualmente.

L'obiettivo del browser è Firefox 3, e viene distribuito in un ambiente controllato, in modo che non ha bisogno di lavorare in IE a tutti.

Tutte le idee ragazzi?Questo mi ha messo in difficoltà.Grazie!

Answer 1

scrollHeight dovrebbe essere l'altezza totale del contenuto. scrollTop consente di specificare lo spostamento dei pixel in che il contenuto visualizzato nella parte superiore dell'elemento dell'area client.

Così si vuole veramente (ancora utilizzando jQuery):

$("#thediv").each( function() 
{
   // certain browsers have a bug such that scrollHeight is too small
   // when content does not fill the client area of the element
   var scrollHeight = Math.max(this.scrollHeight, this.clientHeight);
   this.scrollTop = scrollHeight - this.clientHeight;
});

...che farà scorrere offset per l'ultimo clientHeight vale la pena di contenuto.

Answer 2

scrollIntoView

Il scrollIntoView il metodo consente di scorrere l'elemento in vista.

Answer 3

Utilizzando un ciclo per scorrere jQuery di un elemento è piuttosto inefficiente.Quando si seleziona un ID, si può solo recuperare il primo e l'unico elemento di jQuery tramite get() o [] notazione.

var div = $("#thediv")[0];

// certain browsers have a bug such that scrollHeight is too small
// when content does not fill the client area of the element
var scrollHeight = Math.max(div.scrollHeight, div.clientHeight);
div.scrollTop = scrollHeight - div.clientHeight;

Answer 4

$("#thediv").scrollTop($("#thediv")[0].scrollHeight);

Answer 5

Esso può essere fatto in pianura JS.Il trucco è quello di impostare scrollTop per un valore pari o superiore al totale altezza dell'elemento (scrollHeight):

const theDiv = document.querySelector('#thediv');
theDiv.scrollTop = Math.pow(10, 10);

Da MDN:

Se impostato su un valore maggiore di quella massima disponibile per l'elemento, scrollTop si posa sul valore massimo.

Mentre il valore di Math.pow(10, 10) ha fatto il trucco utilizzando un valore troppo alto come Infintiy o Number.MAX_VALUE verranno ripristinate scrollTop per 0 (Firefox 66).

Answer 6

Ho avuto un div avvolgimento 3 div che sono stati galleggianti a sinistra, e il cui contenuto viene ridimensionata.Essa aiuta a trasformare funky-bordi di colore/sfondo per il div wrapper quando si tenta di risolvere questo problema.Il problema era che il ridimensionata div-content trabocca al di fuori del div wrapper (e bled al di sotto dell'area di contenuto al di sotto del wrapper).

Risolto utilizzando @Shog9 la risposta di sopra.Applicata per la mia situazione, questo è il layout HTML:

<div id="div-wrapper">
  <div class="left-div"></div>
  <div id="div-content" class="middle-div">
  Some short/sweet content that will be elongated by Jquery.
  </div>
  <div class="right-div"></div>
</div>

Questo è stato il mio jQuery per ridimensionare il div wrapper:

<script>
$("#div-content").text("a very long string of text that will overflow beyond the width/height of the div-content");
//now I need to resize the div...
var contentHeight = $('#div-content').prop('scrollHeight')
$("#div-wrapper").height(contentHeight);
</script>

Per nota, $('#div-content').prop('scrollHeight') produce l'altezza che il wrapper deve ridimensionare.Anche io sono a conoscenza di alcun altro modo per ottenere il scrollHeight un'effettiva funzione jQuery;Né di $('#div-content').scrollTop() e $('#div-content').l'altezza dovrebbe produrre il reale contenuto-i valori di altezza.Spero che questo aiuta qualcuno là fuori!