Lassen Sie das Überlauf-Div nach unten gescrollt, es sei denn, der Benutzer scrollt nach oben

Question 1

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. Diesem Div wird dynamisch Inhalt hinzugefügt und es muss ganz nach unten gescrollt werden. Wenn sich der Benutzer jetzt entscheidet, nach oben zu scrollen, möchte ich nicht, dass er wieder nach unten springt, bis der Benutzer wieder ganz nach unten scrollt

Ist es möglich, ein Div zu haben, das nach unten gescrollt bleibt, es sei denn, der Benutzer scrollt nach oben, und wenn der Benutzer nach unten scrollt, muss es sich selbst am unteren Rand halten, selbst wenn neuer dynamischer Inhalt hinzugefügt wird. Wie würde ich vorgehen, um dies zu erstellen.

Question 2

Ich konnte dies nur mit CSS zum Laufen bringen.

Der Trick ist zu verwenden display: flex; und flex-direction: column-reverse;

Der Browser behandelt die Unterseite wie die Oberseite. Vorausgesetzt, die Browser, auf die Sie abzielen, werden unterstützt flex-boxist die einzige Einschränkung, dass das Markup in umgekehrter Reihenfolge erfolgen muss.

Hier ist ein funktionierendes Beispiel. https://codepen.io/jimbol/pen/YVJzBg

Question 3

Das könnte dir helfen:

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

[EDIT]passend zum Kommentar…

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

Rufen Sie beim Hinzufügen von Inhalten die Funktion updateScroll() auf oder stellen Sie einen Timer ein:

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

Wenn Sie NUR aktualisieren möchten, wenn sich der Benutzer nicht bewegt hat:

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

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

Question 4

Ich habe dies gerade implementiert und vielleicht können Sie meinen Ansatz verwenden.

Angenommen, wir haben den folgenden HTML-Code:

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

Dann können wir überprüfen, ob es nach unten gescrollt hat mit:

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

Bildlaufhöhe gibt Ihnen die Höhe des Elements an, einschließlich aller nicht sichtbaren Bereiche aufgrund von Überlauf. clientHöhe gibt Ihnen die CSS-Höhe oder anders gesagt die tatsächliche Höhe des Elements an. Beide Methoden geben die Höhe ohne zurück margindarum brauchen Sie sich also keine Sorgen zu machen. nach oben scrollen gibt Ihnen die Position des vertikalen Bildlaufs an. 0 ist top und max ist die scrollHeight des Elements abzüglich der Elementhöhe selbst. Bei Verwendung der Bildlaufleiste kann es schwierig sein (bei mir war es in Chrome), die Bildlaufleiste ganz nach unten zu bringen. Also habe ich eine Ungenauigkeit von 1px eingeworfen. So isScrolledToBottom gilt auch dann, wenn die Bildlaufleiste 1 Pixel vom unteren Rand entfernt ist. Sie können dies so einstellen, wie es sich für Sie richtig anfühlt.

Dann geht es einfach darum, scrollTop des Elements ganz nach unten zu setzen.

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

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

BEARBEITEN: Code-Snippet hinzugefügt, um zu verdeutlichen, wann isScrolledToBottom ist true.

Bildlaufleiste nach unten kleben

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>

Question 5

Im Jahr 2020 können Sie verwenden CSS-Snapaber vor Chrome 81 ändert sich das Layout Re-Snap nicht auslösenein reine CSS-Chat-Benutzeroberfläche funktioniert auf Chrome 81, auch Sie können überprüfen Kann ich CSS-Snap verwenden.

Diese Demo rastet das letzte Element ein, falls sichtbar, 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;
}

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

BEARBEITEN

benutzen scroll-snap-type: y proximity;einfacher nach oben scrollen.

Question 6

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

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

Question 7

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

Or animated:

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

Question 8

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

Run code snippet um die Wirkung zu sehen. (PS: Wenn Run code snippet funktioniert nicht, versuchen Sie Folgendes: https://jsfiddle.net/Yeshen/xm2yLksu/3/ )
Wie es funktioniert:

Der Standardüberlauf ist das Scrollen von oben nach unten.

transform: rotate(180deg) kann es scrollen lassen oder dynamische Blöcke von unten nach oben laden.

Originale Idee:

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