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

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

Oder animiert:

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

Answer 2

.cont {
  height: 100px;
  overflow-x: hidden;
  overflow-y: auto;
  transform: rotate(180deg);
  direction: rtl;
  text-align: left;
}
ul {
  overflow: hidden;
  transform: rotate(180deg);
}

   0
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10  

https://jsfiddle.net/Yeshen/xm2yLksu/3/

Wie es funktioniert: Standardmäßig erfolgt das Überschlagscrollen von oben nach unten. transform: rotate(180deg) dreht dies um, sodass das Scrollen oder Laden dynamischer Blöcke von unten nach oben erfolgt.

Ursprüngliche Idee: https://blog.csdn.net/yeshennet/article/details/88880252

Answer 3

Basierend auf der Lösung und den Kommentaren von Jim Hall. https://stackoverflow.com/a/44051405/9208887.

Zusätzlich habe ich ein Element mit flex 1 1 0% hinzugefügt, um sicherzustellen, dass der Text oben im Container beginnt, wenn er nicht voll ist.

// nur um einige Zahlen hinzuzufügen, damit wir den Effekt sehen können
// die eigentliche Lösung erfordert kein JavaScript
let num = 1001;
const container = document.getElementById("scroll-container");
document.getElementById("adder").onclick = () =>
  container.append(
    Object.assign(document.createElement("div"), {
      textContent: num++
    })
  );

.scroll-wrapper {
  height: 100px;
  overflow: auto;
  display: flex;
  flex-direction: column-reverse;
  border: 1px solid black;
}

.scroll-start-at-top {
  flex: 1 1 0%;
}

    1000

Text hinzufügen

Answer 4

Hier ist eine Lösung, die auf einem Blog-Beitrag von Ryan Hunt basiert. Es hängt von der CSS-Eigenschaft overflow-anchor ab, die die Bildlaufposition an ein Element am unteren Rand des gescrollten Inhalts anheftet.

function addMessage() {
  const $message = document.createElement('div');
  $message.className = 'message';
  $message.innerText = `Zufallszahl = ${Math.ceil(Math.random() * 1000)}`;
  $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;
}

_Beachten Sie, dass overflow-anchor derzeit nicht in Safari funktioniert._

Answer 5

Die beiden oberen Antworten haben bei mir nicht funktioniert, und keine der anderen Antworten war für mich hilfreich. Hier sind also 3 Lösungen:

Lösung 1:

$(function(){
  var scrolled = false;
  var lastScroll = 0;
  var count = 0;
  $("#chatscreen").on("scroll", function() {
    var nextScroll = $(this).scrollTop();

    if (nextScroll <= lastScroll) {
      scrolled = true;
    }
    lastScroll = nextScroll;

    console.log(nextScroll, $("#inner").height())
    if ((nextScroll + 100) == $("#inner").height()) {
      scrolled = false;
    }
  });

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

  // Jetzt laden wir unsere Nachrichten
  function load_messages(){
      $( "#inner" ).append( "Test" + count + "" );
      count = count + 1;
      updateScroll();
  }

  setInterval(load_messages,300); 
});

#chatscreen {
  width: 300px;
  overflow-y: scroll;
  max-height:100px;
}

Lösung 2:

$(function(){
    var isScrolledToBottom = false;
    // Jetzt laden wir unsere Nachrichten
    function load_messages(){
        $( "#chatscreen" ).append( "Test" );
        updateScr();
    }

    var out = document.getElementById("chatscreen");
    var c = 0;

    $("#chatscreen").on('scroll', function(){
            console.log(out.scrollHeight);
        isScrolledToBottom = out.scrollHeight - out.clientHeight <= out.scrollTop + 10;
    });

    function updateScr() {
            // 1 Pixel Ungenauigkeit zulassen, indem man 1 hinzufügt
        //console.log(out.scrollHeight - out.clientHeight,  out.scrollTop + 1);
        var newElement = document.createElement("div");

        newElement.innerHTML = c++;
        out.appendChild(newElement);

        console.log(isScrolledToBottom);

        // Zum Ende scrollen, wenn isScrolledToBottom
        if(isScrolledToBottom) {out.scrollTop = out.scrollHeight - out.clientHeight; }
    }

    var add = setInterval(updateScr, 1000);

    setInterval(load_messages,300); // auf 300 ändern, um die neueste Nachricht anzuzeigen, die du nach dem Drücken von Enter gesendet hast // kommentiere diese Zeile aus und es funktioniert, kommentiere sie wieder ein und es schlägt fehl
                                    // Wenn es auf 1000 steht, wird die vorletzte Nachricht angezeigt
    setInterval(updateScroll,30);
});

#chatscreen {
  height: 300px;
  border: 1px solid purple;
  overflow: scroll;
}

Lösung 3:

$(function(){

    // Jetzt laden wir unsere Nachrichten
    function load_messages(){
        $( "#chatscreen" ).append( "Test" );
    }

    var out = document.getElementById("chatscreen");
    var c = 0;
    var add = setInterval(function() {
        // 1 Pixel Ungenauigkeit zulassen, indem man 1 hinzufügt
        var isScrolledToBottom = out.scrollHeight - out.clientHeight <= out.scrollTop + 1;
        load_messages();

        // Zum Ende scrollen, wenn isScrolledToBottom
        if(isScrolledToBottom) {out.scrollTop = out.scrollHeight - out.clientHeight; }
    }, 1000);
    setInterval(updateScroll,30);
});

#chatscreen {
  height: 100px;
  overflow: scroll;
  border: 1px solid #000;
}