Недавно я работал над созданием библиотеки компонентов дерева для Angular, ngx-tree.
Проблема
Вскоре после того, как я понял, как реализовать функцию виртуального прокрутки для этой библиотеки для производительности с большим набором данных, и заставил ее нормально работать в firefox, я попал в ловушку от странного поведения прокрутки в Blink - включенные браузеры (например, Chromium, Chrome, Opera).
Демо-ссылка
Вот демон plunkr - https://embed.plnkr.co/xMpmK5EBC46tDKpYFpw8
Ситуация
- В Firefox, Edge и IE 11 моя библиотека с функцией виртуального прокрутки работает в ожидании с плавной прокруткой.
- Однако, в Chrome и Opera, когда я просматриваю некоторые позиции внутри древовидного представления, позиция полосы прокрутки (которая является свойством
scrollTopобласти прокрутки) прыгает вверх и вниз, вызывает мерцание tree-view и перерыв в функции виртуального прокрутки.
версия браузера
- Chrome - 59.0.3071.115
- Firefox - 54.0
- Edge - 40.15063.0.0
другие браузеры
В Китае есть несколько браузеров с шеей, полученных из проекта Chromium (например, 360se, браузер QQ, браузер sogou, браузер uc) с старой версией V8 и миганием. И у них нет такого странного поведения прокрутки.
Некоторое предположение
Это вызвано некоторой оптимизацией в реализации прокрутки (например, гладкой прокруткой) командой Chromium?
Надеюсь получить несколько путеводителей!!! (≧ ﹏ ≦)
Обновление # 1
Обновление демо-ссылки с журналом событий: https://embed.plnkr.co/GpQBZsguhZZOQWWbZnqI/
Необходимо проверить прокрутку перед открытием devtool, чтобы просмотреть журналы
Мне нужно объяснить немного больше, как работает виртуальная прокрутка и что вызывает мерцание.
Сначала рассмотрим дизайн Вирутальной прокрутки.
Ключевой точкой виртуальной прокрутки является создание области поддельной прокрутки того же размера, что и эта область, без использования виртуальной прокрутки. Поэтому в оптимальной ситуации положение полосы прокрутки в области прокрутки не должно меняться, пока некоторые ожидаемые события не вызывают ее изменения. Для события прокрутки мы обновляем представление для каждого кадра анимации.
В пределах области прокрутки с фиксированной высотой мы предполагаем, что свойство scrollTop не изменит с большим процентом, если мы правильно имитируем высоту этих незанятых элементов (может быть немного отклонения для точности вычисления) в анимационном кадре.
Однако, исходя из моих наблюдаемых результатов, браузеры серии blink, похоже, выполняют разностную стратегию для обновления scrollTop прокручиваемого элемента. Его синхронизация для обновления scrollTop отличается от браузеров с не-blink-series. Это все, что я выяснил до сих пор.
Примеры gifs
Здесь я сделал несколько gif, чтобы показать вывод Chrome, Firefox и Edge.
Chrome
Firefox
Край
