Desbordamiento de Div Desplazamiento hacia abajo: ¿Es posible?

Question

Si tengo un div con overflow:auto para que se pueda desplazar div y lo cargue con información que hace un área de desplazamiento significativa, ¿hay alguna manera de que cuando cargue la información, el div muestre los resultados de la parte inferior? ¿O esencialmente se desplaza hacia abajo?

He visto soluciones de jQuery, pero esto es para usar en una HTA, así que no puedo usar jQuery. ¿Hay una forma puramente javascript para lograr esto?

Answer 1

var myDiv = document.getElementById('myDiv'); 
myDiv.scrollTop = myDiv.scrollHeight; 

funciona en Firefox, Safari, Opera, Chrome e incluso Internet Explorer, que es más de lo que puedo decir para la ESS caso de prueba I Configurar ... lol

Le ahorraré la diatriba sobre las soluciones obtusas ofrecidas por otros, y aquí hay un ejemplo de código que podría usarse para un cliente de mensajería instantánea.

document.body.onload = function() 
{ 
    var myDiv = document.getElementById('myDiv'); 
    // Pick your poison below, server sent events, websockets, AJAX, etc. 
    var messageSource = new EventSource('somepage'); 
    messageSource.onmessage = function(event) 
    { 
     // You must add border widths, padding and margins to the right. 
     var isScrolled = myDiv.scrollTop == myDiv.scrollHeight - myDiv.offsetHeight; 
     myDiv.innerHTML += event.data; 
     if(isScrolled) 
      myDiv.scrollTop = myDiv.scrollHeight; 
    }; 
}; 

La parte de ese ejemplo que es controles pertinentes para ver si el div ya se desplaza a la parte inferior, y si es, se desplaza a la parte inferior después de la adición de datos a la misma. Si todavía no se ha desplazado hacia abajo, la posición de desplazamiento del div permanecerá tal que el contenido visible del div no se verá afectado al agregar los datos.

Answer 2

document.getElementById('mydiv').scrollTop = 9999999; 

La propiedad scrollTop especifica el desplazamiento en píxeles desde la parte superior de la región de desplazamiento. Establecerlo en un valor muy grande lo obligará a la parte inferior.

Answer 3

Creo que necesita configurar el scrollTop después de el elemento se actualiza.

setTimeout(function(){ 
    el.scrollTop = 999999999 
}, 10) 

también, en cromo al menos, 99999999999 se desplazará a la parte inferior. pero 999999999999 (un extra de 9) se desplazará a la parte superior. probablemente se haya convertido a un int en el lado C del webkit.

Answer 4

¿Qué le parece esto?

function scroll_to_max(elm) { // {{{ 
    if(!scroll_to_max_el) { 
     scroll_to_max_el = elm; 
     setTimeout(scroll_to_max, 10); // Allow for the element to be updated 
    } else { 
     var el = scroll_to_max_el; 
     var t = el.scrollTop; 
     el.scrollTop = t+100; 
     if(el.scrollTop != t) { 
      setTimeout(scroll_to_max, 10); // Keep scrolling till we hit max value 
     } else { 
      scroll_to_max_el = null; 
     } 
    } 
} 
var scroll_to_max_el = null; // Global var! 
// }}} 

(NOTA: sólo se probó en Chrome ...)

Answer 5

respuesta tardía pero esto es mucho más útil

$('#mydiv').scrollTop(($('#mydiv').height()*2));