Role até o final da div?

Estou criando um bate-papo usando solicitações de ajax em trilhos e estou tentando fazer com que um div role para baixo sem muita sorte.

Estou embrulhando tudo nesta div:

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

Existe uma maneira de mantê-lo rolado até o final por padrão usando JS?

Existe uma maneira de mantê-lo rolado para baixo depois de uma solicitação do ajax?

Aqui está o que eu uso no meu site:

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

Isso é muito mais fácil se você estiver usando o jQuery scrollTop :

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

Você pode usar o seguinte código:

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

Para executar uma rolagem suave com o JQuery:

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

Veja o exemplo no JSFiddle

Eis por que isso funciona:

Ref: scrollTop , scrollHeight , clientHeight

usando o jQuery animate :

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

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

Trabalhos do jQuery 1.6

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

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

Método mais recente que funciona em todos os navegadores atuais :

this.scrollIntoView(false);

rolagem suave com Javascript:

document.getElementById('messages').scrollIntoView({ behavior: 'smooth', block: 'end' });

Se você não quiser confiar scrollHeight, o seguinte código ajuda:

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

Usando jQuery, scrollTop é usado para definir a posição vertical da barra de rolagem para qualquer elemento. há também um bom plugin jquery scrollTo usado para rolar com animação e opções diferentes ( demos )

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

se você quiser usar o método de animação do jQuery para adicionar animação enquanto estiver rolando para baixo, verifique o seguinte trecho:

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

Eu encontrei o mesmo problema, mas com uma restrição adicional: eu não tinha controle sobre o código que anexava novos elementos ao contêiner de rolagem. Nenhum dos exemplos que encontrei aqui me permitiu fazer exatamente isso. Aqui está a solução que eu acabei com.

Ele usa Mutation Observers( https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver ) que o torna utilizável apenas em navegadores modernos (embora existam polyfills)

Então, basicamente, o código faz exatamente isso:

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

Fiz um violino para demonstrar o conceito: https://jsfiddle.net/j17r4bnk/

Javascript ou jquery:

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

Css:

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

Achei isso realmente útil, obrigado.

Para o pessoal do Angular 1.X por aí:

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;

  }
]);

Só porque o agrupamento dos elementos jQuery versus elementos DOM HTML fica um pouco confuso com angular.

Também para um aplicativo de bate-papo, achei que fazer essa tarefa após o carregamento de seus bate-papos para ser útil; você também pode precisar de um tempo limite curto.

pequeno adendo: rola apenas, se a última linha já estiver visível. se rolado um pouco, deixa o conteúdo onde está (atenção: não foi testado com tamanhos de fonte diferentes. isso pode precisar de alguns ajustes dentro de "> = comparação"):

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;

Apenas como um trecho de bônus. Estou usando o angular e estava tentando rolar um segmento de mensagem para baixo quando um usuário selecionou conversas diferentes com os usuários. Para garantir que a rolagem funcione após os novos dados terem sido carregados na div com o ng-repeat para mensagens, basta agrupar o snippet da rolagem em um tempo limite.

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

Isso garantirá que o evento de rolagem seja acionado após a inserção dos dados no DOM.

Você também pode, usando o jQuery, anexar uma animação ao html,bodydocumento via:

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

o que resultará em uma rolagem suave até o topo da div com o ID "div-id".

Script Java:

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

Rola para a última linha do conteúdo presente.

Isso permitirá que você role a tela para baixo em relação à altura do documento

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

Um método muito simples para isso é definir scroll toa altura da div.

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

Role até o último elemento dentro da div:

myDiv.scrollTop = myDiv.lastChild.offsetTop

No meu aplicativo Angular 6, fiz o seguinte:

postMessage() {
  // post functions here
  let history = document.getElementById('history')
  let interval    
  interval = setInterval(function() {
    history.scrollTop = history.scrollHeight
    clearInterval(interval)
  }, 1)
}

A função clearInterval (intervalo) interrompe o temporizador para permitir a rolagem manual superior / inferior.

Meu cenário: eu tinha uma lista de strings, na qual eu tinha que anexar um string dado por um usuário e rolar para o final da lista automaticamente. Eu tinha uma altura fixa da exibição da lista, após a qual ela deveria transbordar.

Tentei a resposta de Jeremy Ruten, funcionou, mas estava rolando para o (n-1) th elemento. Se alguém estiver enfrentando esse tipo de problema, você pode usar a setTimeOut()solução alternativa do método. Você precisa modificar o código abaixo:

setTimeout(() => {
    var objDiv = document.getElementById('div_id');
    objDiv.scrollTop = objDiv.scrollHeight
}, 0)

Aqui está o link StcakBlitz que criei que mostra o problema e sua solução: https://stackblitz.com/edit/angular-ivy-x9esw8

Sei que essa é uma pergunta antiga, mas nenhuma dessas soluções funcionou para mim. Acabei usando offset (). Top para obter os resultados desejados. Aqui está o que eu usei para rolar a tela suavemente até a última mensagem no meu aplicativo de chat:

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

Espero que isto ajude alguém.

Às vezes, a mais simples é a melhor solução: eu não sei se isso vai ajudar, isso me ajudou a rolar para onde sempre quis. Quanto maior o "y =", mais baixo ele rola e, claro, "0" significa superior, então, por exemplo, "1000" pode ser inferior ou "2000" ou "3000" e assim por diante, dependendo de quanto tempo o seu página é. Isso geralmente funciona em um botão com onclick ou onmouseover.

window.scrollTo(x=0,y=150);

Defina a distância da parte superior do elemento rolável para a altura total do elemento.

const element = this.shadowRoot.getElementById('my-scrollable-div')
element.scrollTop = element.scrollHeight

Você pode usar o método HTML DOM scrollIntoView da seguinte maneira:

var element = document.getElementById("scroll");
element.scrollIntoView();

usar :

var element= $('element');
var maxScrollTop = element[0].scrollHeight - element.outerHeight();
element.scrollTop(maxScrollTop);

ou verifique a rolagem para baixo:

    var element = $(element);
    var maxScrollTop = element[0].scrollHeight - element.outerHeight();
    element.on('scroll', function() {
        if ( element.scrollTop() >= maxScrollTop ) {
            alert('scroll to bottom');
        }
    });

Se isso estiver sendo feito para rolar para a parte inferior da janela de bate-papo, faça o seguinte

A ideia de rolar para uma div em particular no chat era a seguinte

1) Cada divisão de bate-papo composta por Pessoa, hora e mensagem é executada em um loop for com a classe chatContentbox

2) querySelectorAll localiza todas essas matrizes. Pode haver 400 nós (400 chats)

3) vá para o último

4) scrollIntoView ()

let lastChatBox = document.querySelectorAll('.chatContentBox'); 
lastChatBox = lastChatBox[lastChatBox.length-1]; 
lastChatBox.scrollIntoView();