example - ajax javascript post

Desplácese hasta la parte inferior de div?

Question

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?

Answer 1

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;

Answer 2

Encontré esto realmente útil, gracias.

Para la gente de Angular 1.X:

angular.module(''myApp'').controller(''myController'', [''$scope'', ''$document'',
  function($scope, $document) {

    var overflowScrollElement = $document[0].getElementById(''your_overflow_scroll_div'');
    overflowScrollElement[0].scrollTop = overflowScrollElement[0].scrollHeight;

  }
]);

Solo porque el ajuste en los elementos jQuery frente a los elementos HTML DOM se vuelve un poco confuso con angular.

También para una aplicación de chat, encontré que hacer esta asignación después de que tus chats se cargaron para ser útil, también es posible que tengas que dar una palmada en el tiempo de espera corto también.

Answer 3

Esto es lo que uso en mi sitio:

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

Answer 4

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

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

Answer 5

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

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

Answer 6

Javascript o jquery:

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

Css:

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

Answer 7

Método más nuevo:

this.scrollIntoView(false);

Answer 8

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/

Answer 9

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

Answer 10

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.

Answer 11

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.

Answer 12

Script de Java:

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

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

Answer 13

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

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

Answer 14

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".

Answer 15

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);

Answer 16

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);

Answer 17

usando jQuery animate :

$(''#DebugContainer'').stop().animate({
  scrollTop: $(''#DebugContainer'')[0].scrollHeight
}, 800);

Answer 18

var mydiv = $("#scroll");
mydiv.scrollTop(mydiv.prop("scrollHeight"));

Obras de jQuery 1.6.

https://api.jquery.com/scrollTop/

http://api.jquery.com/prop/