HTML Ошибка повторного просмотра при помощи Grid Layout и Chrome / Firefox Scroll

Question

Я создаю recycle-view для таблицы, которая представляет много информации, которую нельзя отобразить сразу.

Я начал играть с scrollTop и позиционировал элементы таблицы как transform: translateY(..px), и это работало хорошо.

Но, к сожалению, было бы очень сложно представлять столбцы таблицы с простыми div элементами , Затем я наткнулся на grid макетов и перенес на него реализацию.

Это сработало, но сначала только в Safary. Firefox и Chrome представляют странное поведение на свитках, поскольку я повторно использую свои ячейки для повышения производительности.

Я говорю о том, что у вас есть контейнер grid, содержащий несколько grid cells. И в какой-то момент эти grid cells перемещаются вниз или вверх, чтобы перерабатывать ячейки представления.

То, что ожидалось, все равно будет иметь container.scrollTop то же самое, но на самом деле оно движется вместе с содержимым .

При попытке отладки я обнаружил, что если элемент постоянно присутствует в видимой области прокрутки, он не изменит позицию прокрутки. Затем я добавил первый столбец (представлен красным), но он работает, только если scroll-x имеет часть столбца красного цвета, в противном случае возникает та же ошибка.

Действия по воспроизведению ошибки:

• Открыть Firefox или Chrome (сафари работает)
• Go до https://p407f.csb.app/ (или для проекта csb https://codesandbox.io/s/grid-scrolling-bug-p407f)
• Прокрутите y и увидите, что представление recicle работает, а красная полоса слева всегда есть.
• Уменьшите ширину вашего браузера, чтобы вызвать прокрутку x
• Прокрутите x вправо и уберите красную полосу.
• Прокрутите y и увидите, что она переходит в прокрутку Я не могу переместить прокрутку, так как я могу остановить это поведение при отображении grid?

  На рисунке ниже показано событие прокрутки (первое слева), вызывающее событие прокрутки (последнее справа)