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

Jim Halls Antwort ist vorzuziehen, weil sie zwar nicht bis zum Ende scrollt, wenn nach oben gescrollt wird, aber auch rein mit CSS funktioniert.

Sehr bedauerlicherweise ist dies jedoch keine stabile Lösung: In Chrome (möglicherweise aufgrund des von dotnetCarpenter beschriebenen 1-Pixel-Problems) verhält sich scrollTop ungenau um 1 Pixel, selbst ohne Benutzerinteraktion (beim Hinzufügen von Elementen). Sie können scrollTop = scrollHeight - clientHeight setzen, aber das wird das

in Position halten, wenn ein weiteres Element hinzugefügt wird, d.h. die Funktion "am unteren Rand bleiben" funktioniert nicht mehr.

Also, kurz gesagt, das Hinzufügen einer kleinen Menge an Javascript (seufz) wird dies beheben und alle Anforderungen erfüllen:

So etwas wie https://codepen.io/anon/pen/pdrLEZ (Beispiel von Coo) und nach dem Hinzufügen eines Elements zur Liste auch das Folgende:

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

wo 29 die Höhe einer Zeile ist.

Also, wenn der Benutzer sich um die Hälfte einer Zeile nach oben scrollt (falls dies überhaupt möglich ist?), wird das Javascript dies ignorieren und zum Ende scrollen. Aber ich denke, dies ist vernachlässigbar. Außerdem behebt es das Chrome 1-Pixel-Problem.

Answer 2

//Stellen Sie sicher, dass die Nachrichtenliste nach unten gescrollt wird
var container = $('#MessageWindowContent')[0];
var containerHeight = container.clientHeight;
var contentHeight = container.scrollHeight;

container.scrollTop = contentHeight - containerHeight;

Hier ist meine Version basierend auf dotnetCarpenter's Antwort. Mein Ansatz ist rein jQuery und ich habe die Variablen benannt, um die Dinge etwas klarer zu machen. Was passiert, ist, dass wenn die Inhaltslänge größer ist als der Container, wir die zusätzliche Distanz nach unten scrollen, um das gewünschte Ergebnis zu erzielen.

Funktioniert in IE und Chrome.

Answer 3

Sie können so etwas verwenden,

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

Answer 4

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

Dies berechnet die ScrollTop-Position anhand der Höhe von #yourDivID und verwendet die Eigenschaft $(document).height(), sodass der Scroller immer am unteren Rand bleibt, auch wenn dynamische Inhalte zum div hinzugefügt werden. Ich hoffe, das hilft. Es hat jedoch auch einen kleinen Fehler: Selbst wenn wir nach oben scrollen und den Mauszeiger vom Scroller nehmen, springt er automatisch wieder nach unten. Wenn das jemand korrigieren könnte, wäre das schön.

Answer 5

Die Lösung, die ich am benutzerfreundlichsten finde, besteht darin, den Ansatz mit scroll-snap-align zu kombinieren mit einem kleinen JavaScript. Das Problem bei der vorherigen Lösung war, dass die Ausrichtung zu stark war und man weit scrollen musste, um wieder herauszukommen.

Stattdessen können wir das dynamische Snappen verwenden, wenn der Container bis zum Ende scrollt, und es dann deaktivieren, wenn der Benutzer über einen bestimmten Schwellenwert nach oben scrollt.

Diese Lösung hat den zusätzlichen Vorteil, dass es eine progressive Verbesserung ist: Wenn der Benutzer Javascript deaktiviert hat, fällt es auf den reinen CSS-Ansatz zurück.

const container = document.getElementById("container");
const snap = document.getElementById("snap");

// Scrollen der Ansicht beim ersten Mal bis zum Ende
container.scrollTop = container.scrollHeight;

container.addEventListener("scroll", (event) => {
  const target = event.currentTarget;
  const scroll = target.scrollTop;
  const maxScroll = target.scrollHeight - target.clientHeight;
  const threshold = 50; // px
  isScrollBottomedOut = maxScroll - scroll < threshold;
  // Wenn der Benutzer mehr als den Schwellenwert nach oben scrollt, Snapping deaktivieren
  // Wenn der Benutzer wieder nach unten scrollt, Snapping wieder aktivieren
  snap.style.display = isScrollBottomedOut ? "block" : "none";
});

#container {
  width: 200px;
  height: 500px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  -ms-scroll-chaining: none;
  overscroll-behavior: contain;
  -ms-scroll-snap-type: y proximity;
  scroll-snap-type: y proximity;
  border: 2px solid black;
}

#snap {
  scroll-snap-align: end;
}

    Element
    Element
    Element
    Element
    Element
    Element
    Element
    Element
    Element
    Element
    Element
    Element
    Element
    Element
    Element
    Element
    Element
    Element
    Element
    Element
    Element
    Element
    Element
    Element
    Element
    Element
    Element
    Element
    Element
    Element
    Element
    Element
    Element
    Element
    Element
    Element
    Element
    Element
    Element