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?
javascript
html
ajax
dMix
fonte
fonte
Isso é muito mais fácil se você estiver usando o jQuery scrollTop :
fonte
$("#mydiv").scrollTop(function() { return this.scrollHeight; });
Você pode usar o seguinte código:
Para executar uma rolagem suave com o JQuery:
Veja o exemplo no JSFiddle
Eis por que isso funciona:
Ref: scrollTop , scrollHeight , clientHeight
fonte
usando o jQuery animate :
fonte
Trabalhos do jQuery 1.6
https://api.jquery.com/scrollTop/
http://api.jquery.com/prop/
fonte
Método mais recente que funciona em todos os navegadores atuais :
fonte
rolagem suave com Javascript:
document.getElementById('messages').scrollIntoView({ behavior: 'smooth', block: 'end' });
fonte
Se você não quiser confiar
scrollHeight
, o seguinte código ajuda:fonte
1E10
). Um número menor funcionaUsando 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 )
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:
fonte
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:
Fiz um violino para demonstrar o conceito: https://jsfiddle.net/j17r4bnk/
fonte
<div class="abc"><div data-bind=attr : {'id': myId } ></div></div>
neste código, myId é uma variável. Como posso acessar esse id no script.Javascript ou jquery:
Css:
fonte
Achei isso realmente útil, obrigado.
Para o pessoal do Angular 1.X por aí:
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.
fonte
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"):
fonte
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.
Isso garantirá que o evento de rolagem seja acionado após a inserção dos dados no DOM.
fonte
setTimeout(function() { ... }, n)
Você também pode, usando o jQuery, anexar uma animação ao
html,body
documento 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".
fonte
Script Java:
document.getElementById('messages').scrollIntoView(false);
Rola para a última linha do conteúdo presente.
fonte
Isso permitirá que você role a tela para baixo em relação à altura do documento
fonte
Um método muito simples para isso é definir
scroll to
a altura da div.fonte
Role até o último elemento dentro da div:
fonte
No meu aplicativo Angular 6, fiz o seguinte:
A função clearInterval (intervalo) interrompe o temporizador para permitir a rolagem manual superior / inferior.
fonte
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:Aqui está o link StcakBlitz que criei que mostra o problema e sua solução: https://stackblitz.com/edit/angular-ivy-x9esw8
fonte
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:
Espero que isto ajude alguém.
fonte
À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.
fonte
Defina a distância da parte superior do elemento rolável para a altura total do elemento.
fonte
Você pode usar o método HTML DOM scrollIntoView da seguinte maneira:
fonte
usar :
ou verifique a rolagem para baixo:
fonte
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 ()
fonte
scrollIntoView
, portanto, não é necessário adicionar mais uma.