La risposta di Jim Hall è preferibile perché anche se in realtà non scorre fino in fondo quando si scorre verso l'alto, è anche puro CSS.
Sfortunatamente, tuttavia, questa non è una soluzione stabile: in Chrome (probabilmente a causa del problema di 1-px descritto da dotnetCarpenter sopra), scrollTop
si comporta in modo impreciso di 1 pixel, anche senza l'interazione dell'utente (dopo l'aggiunta dell'elemento). È possibile impostare scrollTop = scrollHeight - clientHeight
, ma ciò manterrà il div in posizione quando viene aggiunto un altro elemento, ovvero la funzione "Mantieni se stesso in fondo" non funziona più.
Quindi, in breve, l'aggiunta di una piccola quantità di Javascript (sospiro) risolverà questo problema e soddisferà tutti i requisiti:
Qualcosa come https://codepen.io/anon/pen/pdrLEZ questo (esempio di Coo), e dopo aver aggiunto un elemento all'elenco, anche il seguente:
container = ...
if(container.scrollHeight - container.clientHeight - container.scrollTop <= 29) {
container.scrollTop = container.scrollHeight - container.clientHeight;
}
dove 29 è l'altezza di una linea.
Quindi, quando l'utente scorre verso l'alto di mezza riga (se è possibile?), Javascript lo ignorerà e scorrerà verso il basso. Ma immagino che questo sia trascurabile. E, risolve il problema di Chrome 1 px.
{position : relative; bottom:0;}
. Rimuovere la proprietà CSS una volta che l'utente ha lo scorrimento.