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 habe versucht, dasselbe mit Bootstrap 5 zu machen. Die Seite, die ich schreibe, ist ein Single-Window-HTML-Tool und ich wollte zwei Spalten mit scrollbaren Inhalten haben, wobei eine in umgekehrter Reihenfolge sein soll, da es sich um ein Log handelt (die andere wird wahrscheinlich nur scrollen, wenn sie absichtlich ausgeführt wird). Die Listen und ihre Überschriften sind auch am unteren Rand verankert, und ich hatte Schwierigkeiten, die Überschrift genau oben auf einer flexiblen scrollbaren Liste zu halten.

Dank der obigen Beispiele konnte ich herausfinden, was mir fehlte, und die richtigen Klassentypen erhalten, um es zum Laufen zu bringen.

Hier ist mein volles Beispiel. In meiner eigentlichen App gibt es links von den anderen beiden eine 3. Spalte mit der Klasse mh-100 col overflow-auto und es besteht keine Notwendigkeit für eine innere Zeile/Spalte, da es keinen Titel gibt, der oben kleben soll (es wird normal scrollen, wenn der Viewport zu klein ist). Die Listen haben eine ID, die ich verwende, um sie auszuwählen und voranzustellen oder das oberste Element zu entfernen (das untere

• Element auf der umgekehrten Liste).

  Ein kleinere Version wird hier zur Verfügung gestellt:

    2. Level Scrollbeispiel
  
          Normale Scroll-Liste, wächst oben
  
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut
              tortor eu ex tincidunt pretium non eu nisl. Ut eu libero ac velit
              ultricies dapibus. Donec id augue scelerisque, gravida est ut,
              commodo sapien. Interdum et malesuada fames ac ante ipsum primis
              in faucibus. Suspendisse volutpat fermentum finibus. Cras egestas
              tempor tempor. Suspendisse potenti. Mauris ac tellus ultrices lectus
              accumsan pellentesque. Nullam semper, nisi nec euismod ultrices, leo
              sem bibendum sapien, in rutrum sapien massa id mi.
  
          Umgekehrte Scroll-Liste, wächst unten
  
              sem bibendum sapien, in rutrum sapien massa id mi.
              accumsan pellentesque. Nullam semper, nisi nec euismod ultrices, leo
              tempor tempor. Suspendisse potenti. Mauris ac tellus ultrices lectus
              in faucibus. Suspendisse volutpat fermentum finibus. Cras egestas
              commodo sapien. Interdum et malesuada fames ac ante ipsum primis
              ultricies dapibus. Donec id augue scelerisque, gravida est ut,
              tortor eu ex tincidunt pretium non eu nisl. Ut eu libero ac velit
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut

  Wenn die Höhe Ihres Viewports geringer ist als der gesamte Inhalt, sollte der Titel oben auf der Liste sitzen und alles am unteren Rand der Seite (tatsächlich 75% der Höhe des Viewports, aber in diesem Beispiel nimmt der Titel nicht den Platz ein, der für ihn vorgesehen war).

  NB: Ich bin kein Webentwickler, sondern schreibe nur einige praktische HTML-basierte Tools für die tägliche Arbeit, also sind Kommentare sehr willkommen.