Mantieni il div di overflow fatto scorrere verso il basso a meno che l'utente non scorri verso l'alto

Ho un div che è grande solo 300 pixel e lo voglio quando il caricamento della pagina scorre fino alla fine del contenuto. Questo div ha un contenuto aggiunto dinamicamente ad esso e deve rimanere scorrere fino in fondo. Ora se l'utente decide di scorrere verso l'alto, non voglio che torni indietro fino a quando l'utente scorre di nuovo completamente verso il basso

È possibile avere un div che rimarrà scorrere verso il basso a meno che l'utente non scorra verso l'alto e quando l'utente scorre di nuovo verso il basso, deve mantenersi in fondo anche quando viene aggiunto un nuovo contenuto dinamico. Come potrei andare a creare questo.

Questo potrebbe aiutarti:

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

[EDIT], per abbinare il commento ...

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

ogni volta che viene aggiunto del contenuto, chiamare la funzione updateScroll () o impostare un timer:

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

se si desidera aggiornare SOLO se l'utente non si è spostato:

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

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

Sono stato in grado di farlo funzionare solo con CSS.

Il trucco è usare display: flex;eflex-direction: column-reverse;

Il browser tratta la parte inferiore come se fosse la parte superiore. Supponendo che i browser a cui ti rivolgi siano il supporto flex-box, l'unica avvertenza è che il markup deve essere in ordine inverso.

Ecco un esempio funzionante. https://codepen.io/jimbol/pen/YVJzBg

Ho appena implementato questo e forse puoi usare il mio approccio.

Supponiamo di avere il seguente HTML:

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

Quindi possiamo verificare se scorre verso il basso con:

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

scrollHeight ti dà l'altezza dell'elemento, inclusa qualsiasi area non visibile a causa di trabocco. clientHeight ti fornisce l'altezza CSS o detta in altro modo, l'altezza effettiva dell'elemento. Entrambi i metodi restituiscono l'altezza senza margin, quindi non devi preoccuparti di questo. scrollTop ti dà la posizione dello scroll verticale. 0 è superiore e massimo è scrollHeight dell'elemento meno l'altezza dell'elemento stesso. Quando si utilizza la barra di scorrimento può essere difficile (era in Chrome per me) portare la barra di scorrimento fino in fondo. così ho gettato una inesattezza 1px. CosìisScrolledToBottom sarà vero anche se la barra di scorrimento è 1px dal basso. Puoi impostarlo su ciò che ritieni giusto per te.

Quindi si tratta semplicemente di impostare lo scrollTop dell'elemento in basso.

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

Ho creato un violino per mostrare il concetto: http://jsfiddle.net/dotnetCarpenter/KpM5j/

EDIT: snippet di codice aggiunto per chiarire quando lo isScrolledToBottomè true.

Stick barra di scorrimento verso il basso

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>

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

Demo live: http://jsfiddle.net/KGfG2/

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

Or animated:

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

Nel 2020, puoi utilizzare lo snap css , ma prima di Chrome 81 la modifica del layout non attiverà il re-snap , una chat css pura funziona su Chrome 81, inoltre puoi controllare Posso usare lo snap CSS .

Questa demo farà scattare l'ultimo elemento, se visibile, scorrere verso il basso per vedere l'effetto.

.container {
  overflow-y: scroll;
  overscroll-behavior-y: contain;
  scroll-snap-type: y mandatory;
}

.container > div > div:last-child {
  scroll-snap-align: end;
}

.container > div > div {
  background: lightgray;
  height: 3rem;
  font-size: 1.5rem;
}
.container > div > div:nth-child(2n) {
  background: gray;
}

<div class="container" style="height:6rem">
<div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</div>

.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 snippetper vedere l'effetto. (PS: se Run code snippetnon funziona, prova questo: https://jsfiddle.net/Yeshen/xm2yLksu/3/ )

2. Come funziona:

L'overflow predefinito è lo scorrimento dall'alto verso il basso.

transform: rotate(180deg) può farlo scorrere o caricare il blocco dinamico dal basso verso l'alto.

3. Idea originale:

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

$('#yourDivID').animate({ scrollTop: $(document).height() }, "slow");
return false;

Questo calcolerà la posizione ScrollTop dall'altezza #yourDivIDdell'utilizzo della $(document).height()proprietà in modo che anche se i contenuti dinamici vengono aggiunti al div, lo scroller sarà sempre nella posizione inferiore. Spero che questo ti aiuti. Ma ha anche un piccolo bug anche se scorriamo verso l'alto e lasciamo il puntatore del mouse dallo scroller, verrà automaticamente nella posizione inferiore. Se qualcuno potesse correggere anche quello sarebbe bello.

//Make sure message list is scrolled to the bottom
var container = $('#MessageWindowContent')[0];
var containerHeight = container.clientHeight;
var contentHeight = container.scrollHeight;

container.scrollTop = contentHeight - containerHeight;

Ecco la mia versione basata sulla risposta di dotnetCarpenter. Il mio approccio è un jQuery puro e ho chiamato le variabili per rendere le cose un po 'più chiare. Quello che sta succedendo è se l'altezza del contenuto è maggiore del contenitore che facciamo scorrere verso il basso per ottenere il risultato desiderato.

Funziona in IE e Chrome ..

La risposta di Jim Hall è preferibile perché anche se in realtà non scorre fino in fondo quando si scorre verso l'alto, è anche puro CSS.

Sfortunatamente, tuttavia, questa non è una soluzione stabile: in Chrome (probabilmente a causa del problema di 1-px descritto da dotnetCarpenter sopra), scrollTopsi comporta in modo impreciso di 1 pixel, anche senza l'interazione dell'utente (dopo l'aggiunta dell'elemento). È possibile impostare scrollTop = scrollHeight - clientHeight, ma ciò manterrà il div in posizione quando viene aggiunto un altro elemento, ovvero la funzione "Mantieni se stesso in fondo" non funziona più.

Quindi, in breve, l'aggiunta di una piccola quantità di Javascript (sospiro) risolverà questo problema e soddisferà tutti i requisiti:

Qualcosa come https://codepen.io/anon/pen/pdrLEZ questo (esempio di Coo), e dopo aver aggiunto un elemento all'elenco, anche il seguente:

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

dove 29 è l'altezza di una linea.

Quindi, quando l'utente scorre verso l'alto di mezza riga (se è possibile?), Javascript lo ignorerà e scorrerà verso il basso. Ma immagino che questo sia trascurabile. E, risolve il problema di Chrome 1 px.

Ecco una soluzione basata su un post sul blog di Ryan Hunt . Dipende dalla overflow-anchorproprietà CSS, che blocca la posizione di scorrimento su un elemento nella parte inferiore del contenuto fatto scorrere.

const messages = [
  'Expect rain today.',
  'Tomorrow will be sunny.',
  'Snow is coming next week.',
  'Hailstorms are imminent.',
];

function addMessage() {
  const $message = document.createElement('div');
  $message.className = 'message';
  $message.innerText = messages[(Math.random() * messages.length) | 0];
  $messages.insertBefore($message, $anchor);

  // Trigger the scroll pinning when the scroller overflows
  if (!overflowing) {
    overflowing = isOverflowing($scroller);
    $scroller.scrollTop = $scroller.scrollHeight;
  }
}

function isOverflowing($el) {
  return $el.scrollHeight > $el.clientHeight;
}

const $scroller = document.querySelector('.scroller');
const $messages = document.querySelector('.messages');
const $anchor = document.querySelector('.anchor');
let overflowing = false;

setInterval(addMessage, 1000);

.scroller {
  overflow: auto;
  height: 90vh;
  max-height: 11em;
  background: #555;
}

.messages > * {
  overflow-anchor: none;
}

.anchor {
  overflow-anchor: auto;
  height: 1px;
}

.message {
  margin: .3em;
  padding: .5em;
  background: #eee;
}

<section class="scroller">
  <div class="messages">
    <div class="anchor"></div>
  </div>
</section>

Nota che overflow-anchorattualmente non funziona in Safari o Edge, quindi questa soluzione non funziona attualmente in tutti i browser.

Puoi usare qualcosa del genere,

var element = document.getElementById("yourDivID");
window.scrollTo(0,element.offsetHeight);

Ecco come l'ho affrontato. La mia altezza div è 650px. Ho deciso che se l'altezza di scorrimento è entro 150 px dalla parte inferiore, quindi scorrere automaticamente. Altrimenti, lascialo per l'utente.

if (container_block.scrollHeight - container_block.scrollTop < 800) {
                    container_block.scrollTo(0, container_block.scrollHeight);
}