Page 1 of 1

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

Posted: 03 Jan 2025, 04:52
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!