Halten Sie das Überlauf-Div am unteren Rand gescrollt, es sei denn, der Benutzer scrollt nach oben.

Question

Ich habe ein div, das nur 300 Pixel groß ist, und ich möchte, dass es beim Laden der Seite zum Ende des Inhalts scrollt. Dieses div hat dynamisch hinzugefügten Inhalt und muss immer ganz unten bleiben. Wenn der Benutzer sich jedoch entscheidet, nach oben zu scrollen, möchte ich nicht, dass es sofort wieder nach unten springt, bis der Benutzer wieder ganz nach unten scrollt.

Ist es möglich, ein div zu haben, das unten bleibt, es sei denn, der Benutzer scrollt nach oben, und wenn der Benutzer wieder nach unten scrollt, muss es sich selbst unten halten, selbst wenn neuer dynamischer Inhalt hinzugefügt wird. Wie könnte ich das erreichen?

Answer 1

Ich konnte das nur mit CSS zum Laufen bringen.

Der Trick ist, flex-direction: column-reverse zu verwenden.

Der Browser behandelt das untere wie das obere. Unter der Annahme, dass die Browser, die Sie ansprechen, flex-box unterstützen, ist der einzige Haken, dass das Markup in umgekehrter Reihenfolge vorliegen muss.

Hier ist ein funktionierendes Beispiel:

.container {
  height: 100px;
  overflow: auto;
  display: flex;
  flex-direction: column-reverse;
}

  Bottom
  Hi
  Hi
  Hi
  Hi
  Hi
  Hi
  Hi
  Hi
  Hi
  Hi
  Hi
  Hi
  Hi
  Hi
  Hi
  Hi
  Top

Answer 2

Dies könnte Ihnen helfen:

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

[EDIT], um den Kommentar anzupassen...

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

Wenn Inhalte hinzugefügt werden, rufen Sie die Funktion updateScroll() auf oder setzen Sie einen Timer:

// einmal pro Sekunde
setInterval(updateScroll,1000);

Wenn Sie nur aktualisieren möchten, wenn der Benutzer nicht gescrollt hat:

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

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

Answer 3

Ich habe das gerade implementiert und vielleicht kannst du meinen Ansatz verwenden.

Sagen wir, wir haben das folgende HTML:

Dann können wir überprüfen, ob es am unteren Rand gescrollt ist mit:

var out = document.getElementById("out");
// Erlaube eine Abweichung von 1px, indem du 1 hinzufügst
var isScrolledToBottom = out.scrollHeight - out.clientHeight <= out.scrollTop + 1;

scrollHeight gibt Ihnen die Höhe des Elements, einschließlich aller nicht sichtbaren Bereiche aufgrund von Überlauf. clientHeight gibt Ihnen die CSS-Höhe oder anders ausgedrückt die tatsächliche Höhe des Elements. Beide Methoden geben die Höhe ohne margin zurück, also brauchen Sie sich keine Sorgen darum zu machen. scrollTop gibt Ihnen die Position des vertikalen Scrolls. 0 ist oben und max ist das scrollHeight des Elements minus die Höhe des Elements selbst. Wenn Sie den Bildlaufbalken verwenden, kann es schwierig sein (für mich war es in Chrome), den Bildlaufbalken ganz nach unten an den Boden zu bringen. Deshalb habe ich eine Ungenauigkeit von 1px hinzugefügt. Daher wird isScrolledToBottom auch wahr sein, wenn der Bildlaufbalken 1px vom Boden entfernt ist. Sie können dies auf das einstellen, was sich für Sie richtig anfühlt.

Dann ist es einfach eine Sache, den scrollTop des Elements nach unten zu setzen.

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

Ich habe für Sie eine Fiddle erstellt, um das Konzept zu zeigen: http://jsfiddle.net/dotnetCarpenter/KpM5j/

EDIT: Hinzugefügter Code-Schnipsel, um zu klären, wann isScrolledToBottom true ist.

Bildlaufbalken am unteren Rand fixieren

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

setInterval(function() {
    // Erlaube eine Abweichung von 1px, indem du 1 hinzufügst
    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;
}

Um es klar zu sagen: Wir möchten, dass der Bildlaufbalken am unteren Rand kleben bleibt, wenn wir ganz nach unten gescrollt haben. Wenn wir nach oben scrollen, möchten wir nicht, dass der Inhalt sich bewegt.

Answer 4

Sie können CSS Scroll Snap verwenden; überprüfen Sie Can I Use für Unterstützung.

In dieser Demo wird das letzte Element angeheftet, wenn es sichtbar ist. Scrollen Sie nach unten, um den Effekt zu sehen.

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

.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;
}

    1
    2
    3
    4
    5

Answer 5

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

Live-Demo: http://jsfiddle.net/KGfG2/