Comments 6
Представлен интересный подход. Но есть ряд недочётов, которые я нашёл за первые 5 минут после ознакомления данного подхода.
Динамические коллекции (создание, обновление и удаление элементов) визуализируются со смещениями:
При быстрой прокрутке возникают пустые пространства. (Для пользователя это дефект):
Насколько корректно при данном подходе будет визуализироваться lazy-подгрузка элементов?
Как полагаю, если реализован класс NativeScrollContainer, то предполагается в будущем реализовать и VirtualScrollContainer?)
P.S.: Посмотрите готовое рабочее универсальное решение для визуализации виртуализированных списков ng-virtual-list
За скрины с багами спасибо. Видимо дальше нужно доводить до ума данный подход. Пока готовил статью, писал эти примеры, вроде сто раз все проверил, чтоб все работало. Правда проверял в Хроме и Файерфоксе. У меня нет эпловских девайсов, чтоб в Сафари проверить. Но я также проверял в Epiphany (GNOME Web), он тоже на движке WebKit, там работает.
lazy-подгрузка (в конец), в примере infinite-scroll, опять же в Хроме и Файерфоксе, корректно вроде бы все отображется, если быстро крутить, можно успеть увидеть спиннер. Как только данные прилетели, спиннер замещается новой порцией элементов. Вот с подгрузкой в начало (чат) при таком подходе есть небольшая проблемка: поскольку положение скроллбара привязано к индексам, при вставке в начало индексы смещаются.
По поводу контейнера, до текущей реализации были другие. Реализация, где полотно анимируется с помощью WebAnimations API, примерно как в Вашем проекте. Мне удалось подобрать тайминги, чтоб выглядело как нативный скролл. Но на слабом устройтве эта анимация уже не такая плавная, как нативный скролл. Хотя у кого в наше время сейчас слабые устройства?
А про Ваш проект я не знал, спасибо что поделились. Выглядит красиво с этим motion blur эффектом.
По поводу "слабого" железа. Нативный scroll контейнер естественно отрабатывает анимации более плавно. Существует ряд ограничений, которые скрывает нативная реализация, в силу чего применимость его в определенных моментах неуместна для универсальной реализации виртуализированных списков. Реализовать частный случай на нативных scroll контейнерах вполне приемлимая задача. По мимо Motion Blur, в инструменте присутствуют не менее интересные FX составляющие, такие как 3d трансформации, Depth Of Field и Fog. Я ранее оставлял комментарий с проектом ng-virtual-grid, он работает, если Вы обратили внимание как раз с участием нативных scroll контейнеров, реализовывая частный случай виртуализированного grid компонента, по этой причине инструмент помечен как Experimental.
Тема данной статьи некорректно отражает фактическую реализацию компонента! Уважаемый автор, ознакомьтесь пожалуйста с примером реализации виртуализированных grid компонентов ng-virtual-grid
В теме под адаптивной Grid разметкой, я имел ввиду разметку, где контейнер имеет свойства:
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--min-size), 1fr));Колонки auto-fill или auto-fit , количество зависит от того, сколько элементов, помещается в строке. Изменяем размер контейнера, меняется количество колонок, элементы переносятся построчно.
Виртуализация адаптивной Grid разметки