Виртуальные Scroll-контейнеры

Вот важная новость с фронта ИИ: djonnyx 13 минут назад Виртуальные Scroll-контейнеры Простой 3 мин 497 Angular * TypeScript * JavaScript * Обзор Всем привет, на этот раз хочу провести обзор инструмента ng-virtual-scroll-view. В предыдущей статье я делал обзор на универсальные виртуализированнные списки, которые "под капотом" использовали одноосевой виртуальный scroll-контейнер. Из проекта ng-virtual-list решил вырастить ещё один инструмент, двухосевой виртуальный scroll-контейнер ng-virtual-scroll-view.

Инструмент также поддерживает версии Angular с 14 по 22. С API и примерами использования можно ознакомиться в документации. Пример использования виртуального scroll-контейнераДумать над реализацией я приступил, когда проектировал библиотеку для создания виртуализированных списков ng-virtual-list, по причине весомых ограничений, которые накладывает нативная (браузерная) реализация scroll-контейнеров.

Технические детали

Основными преимуществами данного решения является:Гибкость в управлении прокруткой. Можно настраивать пользовательские параметры для физики прокрутки. Указывать кастомную продолжительность анимации прокрутки и продолжительность анимации при "прилипании" к краям контейнера.

Захват и перемещение контента с физикой скольжения работает как на мобильных платформах, так и на PC. Смешивание анимаций во время прокрутки. другими словами, когда происходит анимация прокрутки, то можно обновить конечные позиции и анимация будет продолжаться, а не применяться заново.

Возможность указывать начальное и конечное смещение для полосы прокрутки. Возможность создавать контейнеры с перекрытием полос прокрутки. Возможность указывать грани к которым будет "прилипать" прокрутка при изменении размера контента.

Отраслевые последствия

Полноценная кастомизация полос прокрутки. Поддержка "left-to-right" и "right-to-left" режима отображения. Также как и в ng-virtual-list, в ng-virtual-scroll-view я поддержал эффект Motion Blur.

Для создания интерактивных кликабельных элементов внутри контентной части scroll-контейнера можно использовать обычные элементы button, применив к ним специальную директиву virtualClick: My button @Component({ selector: 'my-scroll-view', imports: , templateUrl: '. scss' }) export class Кастомизация полосы прокрутки осуществляется установкой пользовательского компонента в качестве шаблона: @Component({ selector: 'my-scroll-view', imports: , templateUrl: '. scss' }) export class Демонстрация работы компонента: DemoРепозиторий: GithubP.

: Если понравился проект, ставьте звездочку ⭐ng-virtual-scroll-view.

Этот прогресс даёт важные сигналы о будущем отрасли, и технологический мир внимательно наблюдает.