javascript - titles - w3schools try out




Manter div overflow rolado para baixo, a menos que o usuário role para cima (6)

A resposta de Jim Hall é preferível porque, apesar de não rolar para baixo quando você está rolando para cima, também é CSS puro.

Infelizmente, no entanto, esta não é uma solução estável: no chrome (possivelmente devido ao problema de 1 px descrito por dotnetCarpenter acima), scrollTop se comporta de forma imprecisa em 1 pixel, mesmo sem interação do usuário (após o elemento add). Você pode definir scrollTop = scrollHeight - clientHeight , mas isso manterá o div na posição quando outro elemento for adicionado, também conhecido como "manter-se no fundo", o recurso não está mais funcionando.

Então, em suma, adicionando uma pequena quantidade de Javascript (suspiro) irá corrigir isso e cumprir todos os requisitos:

Algo como codepen.io/anon/pen/pdrLEZ isso (exemplo de Coo), e depois de adicionar um elemento à lista, também o seguinte:

container = ...
if(container.scrollHeight - container.clientHeight - container.scrollTop <= 29) {
    container.scrollTop = container.scrollHeight - container.clientHeight;
}

onde 29 é a altura de uma linha.

Então, quando o usuário rola meia linha (se é que isso é possível?), O Javascript irá ignorá-lo e rolar até o final. Mas eu acho que isso é negligenciável. E corrige o Chrome 1 px thingy.

Eu tenho um div que é apenas 300 pixels grandes e eu quero que quando a página carrega rolar para a parte inferior do conteúdo. Esse div tem conteúdo adicionado dinamicamente a ele e precisa permanecer rolado até o fim. Agora, se o usuário decidir rolar para cima, não quero que ele volte para a parte de baixo até que o usuário role todo o caminho novamente

É possível ter um div que permanecerá rolado até o fundo, a menos que o usuário role para cima e quando o usuário rolar de volta para a parte inferior, ele precisa se manter na parte inferior mesmo quando um novo conteúdo dinâmico for adicionado. Como eu iria criar isso?


Acabei de implementar isso e talvez você possa usar minha abordagem.

Digamos que temos o seguinte HTML:

<div id="out" style="overflow:auto"></div>

Então podemos verificar se rolou até o final com:

var out = document.getElementById("out");
// allow 1px inaccuracy by adding 1
var isScrolledToBottom = out.scrollHeight - out.clientHeight <= out.scrollTop + 1;

scrollHeight fornece a altura do elemento, incluindo qualquer área não visível devido ao estouro. clientHeight lhe dá a altura CSS ou disse de outra maneira, a altura real do elemento. Ambos os métodos retornam a altura sem margin , então você não precisa se preocupar com isso. scrollTop lhe dá a posição da rolagem vertical. 0 é top e max é o scrollHeight do elemento menos a própria altura do elemento. Ao usar a barra de rolagem, pode ser difícil (foi no Chrome para mim) para obter a barra de rolagem até o final. então eu joguei uma imprecisão de 1px. Então isScrolledToBottom será verdadeiro mesmo se a barra de rolagem for 1px na parte inferior. Você pode definir isso para o que se sentir bem para você.

Então é simplesmente uma questão de configurar o scrollTop do elemento para o fundo.

if(isScrolledToBottom)
    out.scrollTop = out.scrollHeight - out.clientHeight;

Eu fiz um violino para você mostrar o conceito: http://jsfiddle.net/dotnetCarpenter/KpM5j/

EDIT: Adicionado snippet de código para esclarecer quando isScrolledToBottom é true .

Barra de rolagem para baixo

const out = document.getElementById("out")
let c = 0

setInterval(function() {
    // allow 1px inaccuracy by adding 1
    const isScrolledToBottom = out.scrollHeight - out.clientHeight <= out.scrollTop + 1

    const newElement = document.createElement("div")

    newElement.textContent = format(c++, 'Bottom position:', out.scrollHeight - out.clientHeight,  'Scroll position:', out.scrollTop)

    out.appendChild(newElement)

    // scroll to bottom if isScrolledToBottom is true
    if (isScrolledToBottom) {
      out.scrollTop = out.scrollHeight - out.clientHeight
    }
}, 500)

function format () {
  return Array.prototype.slice.call(arguments).join(' ')
}
#out {
    height: 100px;
}
<div id="out" style="overflow:auto"></div>
<p>To be clear: We want the scrollbar to stick to the bottom if we have scrolled all the way down. If we scroll up, then we don't want the content to move.
</p>


Isso pode ajudá-lo:

var element = document.getElementById("yourDivID");
element.scrollTop = element.scrollHeight;

[EDIT], para corresponder ao comentário ...

function updateScroll(){
    var element = document.getElementById("yourDivID");
    element.scrollTop = element.scrollHeight;
}

sempre que o conteúdo for adicionado, chame a função updateScroll () ou defina um temporizador:

//once a second
setInterval(updateScroll,1000);

se você quiser atualizar SOMENTE se o usuário não se mover:

var scrolled = false;
function updateScroll(){
    if(!scrolled){
        var element = document.getElementById("yourDivID");
        element.scrollTop = element.scrollHeight;
    }
}

$("#yourDivID").on('scroll', function(){
    scrolled=true;
});

.cont{
height: 100px;
overflow-x: hidden;
overflow-y: auto;
transform: rotate(180deg);
direction:rtl;
text-align:left;
}
ul{
overflow: hidden;
transform: rotate(180deg);
}
<div class="cont"> 
 <ul>
   <li>0</li>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
   <li>6</li>
   <li>7</li>
   <li>8</li>
   <li>9</li>
   <li>10</li>  
 </ul>
</div>

  1. Run code snippet para ver o efeito. (PS: Se o Run code snippet não estiver funcionando, tente isto: https://jsfiddle.net/Yeshen/xm2yLksu/3/ )

  2. Como isso funciona:

Sobrecarga padrão é rolar de cima para baixo.

transform: rotate(180deg) pode fazer rolar ou carregar o bloco dinâmico de baixo para cima.

  1. Ideia original:

https://blog.csdn.net/yeshennet/article/details/88880252


$('#div1').scrollTop($('#div1')[0].scrollHeight);

Or animated:

$("#div1").animate({ scrollTop: $('#div1')[0].scrollHeight}, 1000);





scroll