Deslocamento Transbordou DIVs com JavaScript
-
08-06-2019 - |
Pergunta
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!
Solução
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.
Outras dicas
O scrollIntoView método desloca-se o elemento no modo de exibição.
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;
$("#thediv").scrollTop($("#thediv")[0].scrollHeight);
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).
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!