Wie bekomme ich eine NextUI ListBox, um zum letzten ListItem zu scrollen?HTML

HTML-Programmierer
Guest
 Wie bekomme ich eine NextUI ListBox, um zum letzten ListItem zu scrollen?

Post by Guest »

Einige Hintergrundinformationen: Ich versuche, einen Nachrichten-Chat-Feed zu erstellen.
Ich habe eine NextUI ListBox-Komponente mit der Eigenschaft isVirtualized und den entsprechenden Parameter. Es wird wie folgt erstellt:

Code: Select all

        

{(item) => (

{item.text}

)}


Und der ListboxWrapper:

Code: Select all

const ListboxWrapper = ({children}) => (

{children}

);
Die Elemente der Liste werden dynamisch geladen. Ich möchte, dass das letzte Element in der Liste immer am Ende des enthaltenden Div steht.
Ich habe derzeit:

Code: Select all

const scrollToBottom = () => {
messagesEndRef.current?.scrollIntoView({behavior: 'smooth' , block: 'end'})
}
Was nach oben scrollt. Es scheint egal zu sein, welchen Block ich setze (

Code: Select all

end
oder start), das Verhalten ist das gleiche. Mache ich etwas falsch oder gibt es einen einfacheren Weg, dies zu tun?
Ich hatte die gleichen Ergebnisse mit document.getElementById(..).scrollIntoView(..). Ich habe auch den Verweis auf das letzte Listenelement verschoben, aber wenn ich das mache, erscheint das letzte Listenelement oben im Container und die anderen Elemente sind nicht sichtbar und können nicht gescrollt werden.
Vielen Dank im Voraus!

Quick Reply

Change Text Case: 
   
  • Similar Topics
    Replies
    Views
    Last post