javascript español - Desplácese hasta la parte inferior de div?




ajax example (16)

Estoy creando un chat utilizando las solicitudes de ajax en los rieles y estoy tratando de hacer que un div se desplace hacia el fondo sin mucha suerte.

Estoy envolviendo todo en este div:

#scroll {
    height:400px;
    overflow:scroll;
}

¿Hay una manera de mantenerlo desplazado a la parte inferior de forma predeterminada utilizando JS?

¿Hay alguna manera de mantenerlo en la parte inferior después de una solicitud de ajax?


Answers

También puede, usando jQuery, adjuntar una animación a html,body del documento a través de:

$("html,body").animate({scrollTop:$("#div-id")[0].offsetTop}, 1000);

lo que resultará en un desplazamiento suave hacia la parte superior de la div con id "div-id".


Esto le permitirá desplazarse hacia abajo en relación con la altura del documento

$('html, body').animate({scrollTop:$(document).height()}, 1000);

Sólo como un fragmento de bono. Estoy usando angular y estaba tratando de desplazar un hilo de mensajes al final cuando un usuario seleccionó diferentes conversaciones con los usuarios. Para asegurarse de que el desplazamiento funcione después de que se hayan cargado los nuevos datos en la división con la repetición ng para mensajes, simplemente ajuste el fragmento de desplazamiento en un tiempo de espera.

$timeout(function(){
    var messageThread = document.getElementById('message-thread-div-id');
    messageThread.scrollTop = messageThread.scrollHeight;
},0)

Eso asegurará que el evento de desplazamiento se active después de que los datos se hayan insertado en el DOM.


Me he encontrado con el mismo problema, pero con una restricción adicional: no tenía control sobre el código que añadía nuevos elementos al contenedor de desplazamiento. Ninguno de los ejemplos que encontré aquí me permitieron hacer precisamente eso. Aquí está la solución con la que terminé.

Utiliza los Mutation Observers ( https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver ), lo que hace que sea utilizable solo en los navegadores modernos (aunque existen polyfills)

Así que básicamente el código hace precisamente eso:

var scrollContainer = document.getElementById("myId");

// Define the Mutation Observer
var observer = new MutationObserver(function(mutations) {

  // Compute sum of the heights of added Nodes
  var newNodesHeight = mutations.reduce(function(sum, mutation) {
      return sum + [].slice.call(mutation.addedNodes)
        .map(function (node) { return node.scrollHeight || 0; })
        .reduce(function(sum, height) {return sum + height});
  }, 0);

  // Scroll to bottom if it was already scrolled to bottom
  if (scrollContainer.clientHeight + scrollContainer.scrollTop + newNodesHeight + 10 >= scrollContainer.scrollHeight) {
    scrollContainer.scrollTop = scrollContainer.scrollHeight;
  }

});

// Observe the DOM Element
observer.observe(scrollContainer, {childList: true});

Hice un violín para demostrar el concepto: https://jsfiddle.net/j17r4bnk/


Si no desea confiar en scrollHeight , el siguiente código ayuda:

$('#scroll').scrollTop(1000000);

Usando jQuery, scrollTop se usa para establecer la posición vertical de la barra de desplazamiento para cualquier elemento dado. También hay un agradable complemento jquery scrollTo que se usa para desplazarse con animación y diferentes opciones ( demos )

var myDiv = $("#div_id").get(0);
myDiv.scrollTop = myDiv.scrollHeight;

Si desea usar el método animado de jQuery para agregar animación mientras se desplaza hacia abajo, verifique el siguiente fragmento de código:

var myDiv = $("#div_id").get(0);
myDiv.animate({
    scrollTop: myDiv.scrollHeight
  }, 500);

Puede utilizar el siguiente código:

function scrollToBottom(id){
   var div = document.getElementById(id);
   div.scrollTop = div.scrollHeight - div.clientHeight;
}

Para realizar un desplazamiento suave , use el siguiente código (requiere jQuery):

function scrollSmoothToBottom (id) {
   var div = document.getElementById(id);
   $('#' + id).animate({
      scrollTop: div.scrollHeight - div.clientHeight
   }, 500);
}

Vea la muestra en JSFiddle

Y así es como funciona:

JSFiddle

Ref: scrollTop , scrollHeight , clientHeight


Sé que esta es una vieja pregunta, pero ninguna de estas soluciones funcionó para mí. Terminé usando offset (). Top para obtener los resultados deseados. Esto es lo que usé para desplazar suavemente la pantalla hasta el último mensaje en mi aplicación de chat:

$("#html, body").stop().animate({
     scrollTop: $("#last-message").offset().top
}, 2000);

Espero que esto ayude a alguien más.


Un método muy simple para esto es configurar el scroll to a la altura del div.

var myDiv = document.getElementById("myDiv");
window.scrollTo(0, myDiv.innerHeight);

Script de Java:

document.getElementById('messages').scrollIntoView(false);

Se desplaza a la última línea del contenido presente.


Addendum pequeño: solo se desplaza, si la última línea ya está visible. si se desplaza un poco, deja el contenido donde está (atención: no se ha probado con diferentes tamaños de fuente. Esto puede necesitar algunos ajustes dentro de "> = comparación"):

var objDiv = document.getElementById(id);
var doScroll=objDiv.scrollTop>=(objDiv.scrollHeight-objDiv.clientHeight);                   

// add new content to div
$('#' + id ).append("new line at end<br>"); // this is jquery!

// doScroll is true, if we the bottom line is already visible
if( doScroll) objDiv.scrollTop = objDiv.scrollHeight;

Esto es lo que uso en mi sitio:

var objDiv = document.getElementById("your_div");
objDiv.scrollTop = objDiv.scrollHeight;

Método más nuevo:

this.scrollIntoView(false);

Esto es mucho más fácil si estás usando jQuery:

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

Javascript o jquery:

var scroll = document.getElementById('messages');
   scroll.scrollTop = scroll.scrollHeight;
   scroll.animate({scrollTop: scroll.scrollHeight});

Css:

 .messages
 {
      height: 100%;
      overflow: auto;
  }

<div id="foo"></div>

$('#foo').html('<div></div>');






javascript html ajax