Как получить следующую коробку Listui, чтобы прокрутить до последнего списка? ⇐ Html

[Anonymous]

Некоторый фон, я пытаюсь создать канал чата сообщения. параметры Он создается с помощью следующего: < /p>

Код: Выделить всё

    
{selectedServer ? selectedServer.serverAlias : "Chat Title"}


{(item) => (

{item.text}

)}

и listboxwrapper :

Код: Выделить всё

const ListboxWrapper = ({children}) => (

{children}

);
< /code>
Элементы списка загружаются динамически. Я хотел бы, чтобы последний элемент в списке всегда был в нижней части содержащегося дивизиона < /p>
У меня в настоящее время: < /p>
const scrollToBottom = () => {
messagesEndRef.current?.scrollIntoView({behavior: 'smooth' , block: 'end'})
}
< /code>
, который прокручивается вверх. Кажется, не имеет значения, какой блок я установил (end

или start ), поведение одинаково. Я делаю что -то не так или есть более простой способ сделать это? Я также переместил ссылку к последнему элементу списка, но когда я это делаю, последний элемент списка появляется в верхней части контейнера, а другие элементы не видны и не могут быть прокручены.
Обновление: < /p>
Я попробовал решение, предложенное ниже, но одно и то же поведение. Listbox прокручивается вверху. Я обновил приведенный выше код, чтобы включить полный возврат компонента. >

Код: Выделить всё

const [selectedKeys, setSelectedKeys] = React.useState(new Set(["text"]));
const selectedValue = React.useMemo(() => Array.from(selectedKeys).join(", "), [selectedKeys]);

const onKeyPressHandler = e => {
if (e.key === "Enter") {
const message = new ApiCall()
const chatRequest = new ChatRequest()
chatRequest.setChattext(textValue)
chatRequest.setServerid(selectedServer.serverID)
message.setChatrequest(chatRequest)
const apiCall = message.serializeBinary()

const requestOptions = {
method: 'POST',
headers: {'Content-Type': 'application/x-protobuf'},
body: apiCall
};

console.log("fetching chats")
fetch('http://localhost:8080/api/chats', requestOptions)
.then(response => {
if (response.ok) {
getChats()
}

changeTextValue("");
})
}
};

const onChangeHandler = e => {
changeTextValue(e.target.value);
};

и, наконец, функция getChats , которая получает чаты из бэкэнда и вызывает Scrolltobottom после его завершения:

Код: Выделить всё

const getChats = () => {
fetch("http://localhost:8080/api/chats?serverID=" + selectedServer.serverID)
.then(res => res.json())
.then(data => {
setChats(data);
scrollToBottom()
})
}

update2:
Я добавил консольную. чаты обновляются. Тем не менее, это не прокрутка. Каждый раз, когда я ввожу что -нибудь в поле ввода, списки прокручиваются вверх Вернемся к чертежной доске и провели некоторое исследование сетей и гибких макетов. Я также перешел с использования виртуализированного прокрутки, который поставляется с ListBox на прокрутку CSS с использованием переполнения , делая ответ ниже.

Подробнее здесь: https://stackoverflow.com/questions/793 ... t-listitem