Прокрутка не перемещается при изменении переполненного списка ⇐ CSS

[Anonymous]

Что не так?
Когда я добавляю элемент и прокрутка находится сверху, он не перемещается (остается сверху), а новые элементы перемещаются старые, поэтому вид пользователя меняется
Для воспроизведения:
Создайте список анимированных элементов по умолчанию с параметром overflow-y: auto, затем переполните его и добавьте элемент во время прокрутки сверху.
Ожидаемое поведение:
прокрутка выиграна. Не перемещается, и новые элементы перемещают старые элементы из текущего пользовательского представления.
Мне нужно переместить прокрутку с помощью привязки переполнения, чтобы представление пользователя не менялось при обновлении списка
Мне нужно переместить прокрутку с помощью привязки переполнения, чтобы представление пользователя не менялось при обновлении списка
p>
Воспроизвести код проблемы:
import "./App.css";
import { useEffect, useState } from "react";
import { animated, useTransition } from "@react-spring/web";

function App() {
const [items, setItems] = useState([]);
const transitions = useTransition(items, {
key: (item: string) => item,
from: { transform: "scale(0)", opacity: 0 },
leave: { transform: "scale(0)", opacity: 0 },
enter: { transform: "scale(1)", opacity: 1 },
});

useEffect(() => {
const addItem = () => {
const newItem = Math.random() * 9999 + new Date().toISOString();
setItems((arr) => [newItem, ...arr]);
};
for (let i = 0; i < 30; i++) {
addItem();
}

const interval = setInterval(addItem, 500);

return () => clearInterval(interval);
}, []);

return (

• {transitions((style, item, y, index) => (
  {item}
  ))}

);
}

export default App;


CSS
ul {
overflow-y: auto;
max-height: 100vh;
}


Подробнее здесь: https://stackoverflow.com/questions/787 ... ist-change