Pregunta Desplácese hasta la parte inferior de div?


Estoy creando un chat usando las solicitudes ajax en rieles y estoy tratando de obtener un div para desplazarme al final sin mucha suerte.

Estoy envolviendo todo en este div:

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

¿Hay alguna manera de mantenerlo desplazado hacia abajo por defecto usando JS?

¿Hay alguna manera de mantenerlo desplazado hacia abajo después de una solicitud de ajax?


619
2017-11-06 22:37


origen


Respuestas:


Esto es lo que uso en mi sitio:

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

1015
2017-11-06 22:42



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

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

322
2018-04-19 02:17



utilizando jQuery animado:

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

83
2017-09-12 15:00



Puedes usar el siguiente código:

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

Para realizar un suave desplazarse, use el siguiente código (requiera jQuery):

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

Ver el muestra en JSFiddle

Y así es como funciona:

enter image description here

Árbitro: scrollTop, scrollHeight, clienteAltura


66
2017-10-18 02:27



Versión jQuery:

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

Funciona desde jQuery 1.6

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

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


30
2018-01-10 15:53



Método más nuevo:

this.scrollIntoView(false);

18
2017-10-10 07:08



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

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

11
2018-06-10 10:58



Usando jQuery, scrollTop se usa para establecer la posición vertical de scollbar para cualquier elemento dado. también hay un buen jquery scrollTo plugin utilizado para desplazarse con animación y diferentes opciones (población)

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

si quieres usar Método animado de jQuery para agregar una animación mientras se desplaza hacia abajo, verifique el siguiente fragmento:

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

6
2017-11-19 19:40



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 de los elementos jQuery frente a los elementos HTML DOM se vuelve un poco confuso con angular.

También para una aplicación de chat, me pareció que hacer esta tarea después de que tus chats estuvieran cargados para ser útil, también es posible que necesites un pequeño tiempo de espera también.


6
2017-09-15 17:56



pequeño apéndice: solo se desplaza, si la última línea ya está visible. si se desplaza un poco, deja el contenido donde está (atención: no probado con diferentes tamaños de fuente, 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;

5
2017-07-03 13:58



Solo como un fragmento de bonificación. Estoy usando angular y estaba tratando de desplazar una secuencia de mensajes hacia abajo cuando un usuario seleccionaba diferentes conversaciones con los usuarios. Para asegurarse de que el desplazamiento funciona después de que los datos nuevos se hayan cargado en el div con la repetición ng para los mensajes, simplemente ajuste el fragmento de desplazamiento en un tiempo de espera excedido.

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


4
2017-08-21 12:41