javascript - down - Mantenga overflow div desplazado hacia abajo a menos que el usuario se desplace hacia arriba

scroll down jquery

Question

Tengo un div que tiene solo 300 píxeles de tamaño y quiero que cuando la página cargue vaya al final del contenido. Este div tiene contenido agregado dinámicamente y necesita permanecer desplazado hacia abajo. Ahora, si el usuario decide desplazarse hacia arriba, no quiero que vuelva a la parte inferior hasta que el usuario se desplace de nuevo hacia abajo

¿Es posible tener un div que se mantendrá desplazado hacia abajo a menos que el usuario se desplace hacia arriba y cuando el usuario se desplaza hacia abajo hasta el final necesita mantenerse en la parte inferior incluso cuando se agrega nuevo contenido dinámico. ¿Cómo iría a crear esto?

Answer 1

Acabo de implementar esto y quizás puedas usar mi enfoque.

Digamos que tenemos el siguiente HTML:

<div id="out" style="overflow:auto"></div>

Entonces podemos verificar si se desplazó al fondo con:

var out = document.getElementById("out");
// allow 1px inaccuracy by adding 1
var isScrolledToBottom = out.scrollHeight - out.clientHeight <= out.scrollTop + 1;

scrollHeight le proporciona la altura del elemento, incluida cualquier área no visible debido al desbordamiento. clientHeight le da la altura de CSS o dicho de otra manera, la altura real del elemento. Ambos métodos devuelven la altura sin margin , por lo que no debe preocuparse por eso. scrollTop te da la posición del desplazamiento vertical. 0 es superior y máxima es la altura de desplazamiento del elemento menos la altura del elemento en sí. Cuando utilizo la barra de desplazamiento, puede ser difícil (fue en Chrome para mí) hacer que la barra de desplazamiento llegue a la parte inferior. entonces lancé una imprecisión de 1px. Entonces isScrolledToBottom será verdadero incluso si la barra de desplazamiento es 1px desde la parte inferior. Puedes configurar esto para lo que te parezca más adecuado.

Entonces es simplemente una cuestión de establecer el scrollTop del elemento en la parte inferior.

if(isScrolledToBottom)
    out.scrollTop = out.scrollHeight - out.clientHeight;

He creado un violín para que muestres el concepto: http://jsfiddle.net/dotnetCarpenter/KpM5j/

Answer 2

Pude hacer que esto funcionara solo con CSS.

El truco es usar display: flex; y flex-direction: column-reverse;

El navegador trata la parte inferior como si fuera la parte superior. Suponiendo que los navegadores a los que apunta son compatibles con flex-box , la única advertencia es que el marcado debe estar en orden inverso.

Aquí hay un ejemplo de trabajo. https://codepen.io/jimbol/pen/YVJzBg

Answer 3

bien mientras esto podría ayudarte:

var element = document.getElementById("yourDivID");
element.scrollTop = element.scrollHeight;

[EDITAR], para que coincida con el comentario ...

function updateScroll(){
    var element = document.getElementById("yourDivID");
    element.scrollTop = element.scrollHeight;
}

cada vez que se agrega contenido, llame a la función updateScroll () o configure un temporizador:

//once a second
setInterval(updateScroll,1000);

si desea actualizar SOLAMENTE si el usuario no se movió:

var scrolled = false;
function updateScroll(){
    if(!scrolled){
        var element = document.getElementById("yourDivID");
        element.scrollTop = element.scrollHeight;
    }
}

$("#yourDivID").on(''scroll'', function(){
    scrolled=true;
});

Answer 4

$(''#div1'').scrollTop($(''#div1'')[0].scrollHeight);

Or animated:

$("#div1").animate({ scrollTop: $(''#div1'')[0].scrollHeight}, 1000);

Answer 5

$(''#yourDiv'').scrollTop($(''#yourDiv'')[0].scrollHeight);

Demostración en vivo: http://jsfiddle.net/KGfG2/

Answer 6

$(''#yourDivID'').animate({ scrollTop: $(document).height() }, "slow");
return false;

Esto calculará la posición ScrollTop desde la altura de #yourDivID usando la #yourDivID $(document).height() para que incluso si se agregan contenidos dinámicos al div, la barra de desplazamiento siempre estará en la posición inferior. Espero que esto ayude. Pero también tiene un pequeño error, incluso si nos desplazamos hacia arriba y dejamos el puntero del mouse desde la rueda de desplazamiento, automáticamente se colocará en la posición inferior. Si alguien puede corregir eso también será bueno.

Answer 7

//Make sure message list is scrolled to the bottom
var container = $(''#MessageWindowContent'')[0];
var containerHeight = container.clientHeight;
var contentHeight = container.scrollHeight;

container.scrollTop = contentHeight - containerHeight;

Aquí está mi versión basada en la respuesta de dotnetCarpenter. Mi enfoque es un jQuery puro y nombré las variables para aclarar un poco las cosas ... Lo que sucede es que si la altura del contenido es mayor que el contenedor, desplazamos la distancia adicional hacia abajo para lograr el resultado deseado.

Funciona en IE y Chrome.