Deslocamento Transbordou DIVs com JavaScript

Question

Eu tenho uma div que usa overflow:auto para manter o conteúdo dentro da div, como é redimensionada e arrastado ao redor da página.Eu estou usando alguns ajax para recuperar linhas de texto a partir do servidor e, em seguida, anexá-los para o fim de div, de modo que o conteúdo está crescendo para baixo.Cada vez que isso acontece, eu gostaria de usar o jquery para rolar a div para o fundo de maneira mais recentemente adicionados conteúdo é visível, de forma similar a uma sala de chat ou console de linha de comando seria o trabalho.

Até agora eu tenho vindo a utilizar este trecho de fazê-lo (eu também estou usando o jQuery, daí o $() de função):

$("#thediv").scrollTop = $("#thediv").scrollHeight;

No entanto, ele foi me dando resultados inconsistentes.Às vezes funciona, às vezes não, e ele cessa de trabalhar, se o usuário nunca redimensiona div ou move a barra de rolagem manualmente.

O destino do navegador é o Firefox 3, e está sendo implantado em um ambiente controlado para que ele não precise trabalhar-no-IE em tudo.

Qualquer idéias caras?Este tem-me perplexo.Obrigado!

Answer 1

scrollHeight deve ser a altura total do conteúdo. scrollTop especifica o deslocamento de pixel em que o conteúdo a ser exibido na parte superior do elemento de área do cliente.

Então, você realmente quer (ainda usando jQuery):

$("#thediv").each( function() 
{
   // certain browsers have a bug such that scrollHeight is too small
   // when content does not fill the client area of the element
   var scrollHeight = Math.max(this.scrollHeight, this.clientHeight);
   this.scrollTop = scrollHeight - this.clientHeight;
});

...que vai definir o deslocamento deslocamento para o último clientHeight a pena de conteúdo.

Answer 2

scrollIntoView

O scrollIntoView método desloca-se o elemento no modo de exibição.

Answer 3

Usando um loop para iterar através de um fórum de um elemento é bastante ineficiente.Ao selecionar um ID, você pode simplesmente recuperar o primeiro e único elemento do jQuery usando get() ou [] notação.

var div = $("#thediv")[0];

// certain browsers have a bug such that scrollHeight is too small
// when content does not fill the client area of the element
var scrollHeight = Math.max(div.scrollHeight, div.clientHeight);
div.scrollTop = scrollHeight - div.clientHeight;

Answer 4

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

Answer 5

Isso pode ser feito na planície JS.O truque é definido scrollTop para um valor igual ou maior do que a altura total do elemento (scrollHeight):

const theDiv = document.querySelector('#thediv');
theDiv.scrollTop = Math.pow(10, 10);

A partir de MDN:

Se for definido para um valor maior que o máximo disponível para o elemento, scrollTop a transa em si para o valor máximo.

Enquanto o valor de Math.pow(10, 10) fez o truque usando um valor muito alto, como Infintiy ou Number.MAX_VALUE irá repor scrollTop para 0 (Firefox 66).

Answer 6

Eu tinha uma div de moldagem de 3 divs que estavam flutuando à esquerda, e cujos conteúdos foram sendo redimensionado.Ele ajuda a transformar funky cor-de-fronteiras/fundo para o div-wrapper quando você tentar resolver isso.O problema era que o redimensionada div-conteúdo estava transbordando de fora da div-wrapper (e derramou seu sangue para debaixo da área de conteúdo abaixo o wrapper).

Resolvido usando @Shog9 a resposta acima.Como aplicados a minha situação, este foi o layout de HTML:

<div id="div-wrapper">
  <div class="left-div"></div>
  <div id="div-content" class="middle-div">
  Some short/sweet content that will be elongated by Jquery.
  </div>
  <div class="right-div"></div>
</div>

Este foi o meu jQuery para redimensionar o div-wrapper:

<script>
$("#div-content").text("a very long string of text that will overflow beyond the width/height of the div-content");
//now I need to resize the div...
var contentHeight = $('#div-content').prop('scrollHeight')
$("#div-wrapper").height(contentHeight);
</script>

A nota, $('#div-conteúdo").prop('scrollHeight') produz a altura que o wrapper necessidades para redimensionar.Também não tenho conhecimento de qualquer outra forma de obter o scrollHeight um real jQuery função;Nem de $('#div-conteúdo").scrollTop() e $('#div-conteúdo").altura seria produzir o conteúdo real-valores de altura.Espero que isso ajude alguém lá fora!