Привет, спасибо за серию видео по виртуальному скроллу, оказалось очень полезно! У меня такой вопрос - почему для конечного item ты указываешь top: 0, а после делаешь transform: translateY(virtualItem.offsetTop)? Почему сразу не установить top в нужную для этого позицию virtualItem.offsetTop? И что ты сказал на 16:41, что какой то транслейт работает более быстро, какой я не могу расслышать)
я пытался тоже писать свою виртуализацию для списков, имея опыт нативной андроид разработки и так и не осилил кейс с рендерингом элементов различной высоты. в анроиде для этого есть либа recyclerview и я пытался сделать что-то подобное. но фишка в том, что в андроиде у всех компонентов есть стадия измерения, лейаута и собственно отрисовки, и можно эти методы переопределить и посчитать/изменить размеры ещё не отрисованого элемента. как с этим быть в html/js я так и не понял, в предвкушении следующего видео!)
На самом деле тут что-то похожее получается. В определенных стадиях рендеринга компонента производим нужные действия. Правда работать с этим не так просто и очевидно. Спасибо за фидбэк!
Привет, классный ролик с отличным контентом! Возник вопрос, по какой причине было решено использовать addEventListener, а не onSroll на контейнер, были ли какие-то конкретные причины, или это больше для удобства? Спасибо!
скорее для удобства. мы же внутри хука просто доступ к DOM ноде получаем. Не хотелось, чтобы человек еще сам должен был руками вещать наш onScroll обработчик.
Нужно для того, чтобы при быстром скролле ты не видел белый экран. Так как скролл происходит в отдельном треде, который переодический эммитит ивенты в JS.
@@ayub_begimkulov Спасибо за ответ! Забыл удалить вопрос, ибо стало понятно во втором видосе, где ты проговорил тоже самое, что написал в этом ответе :)
А можешь пожалуйста раскрыть мысль? Не совсем понимаю, как он тут мог бы помочь? IntersectionObsrver больше же про попадание элемента во viewport, то есть нужно, чтобы DOM элемент уже был какой-то. А в нашем случае у нас вообще не рендериться ничего, кроме видимых элементов + overscan.
Как раз что такое хочу сделать в проекте, я делал с intersection observer, с бека приходят товары по 6шт например, в экран влезает 4шт, и когда скрол доходит до предпоследнего загпуженного товара кидается запрос на бек. Но теперь проблема, когда юзер открывает страницу товара и выходит назад, как то надо сохранять, товары которые он просмотрел, либо только кусок прошлого списка, но тогда придётся ещё скрол наверх обрабатывать как то))
Дак а в чем проблема? Текущий отображаемый список и позицию скролла хранишь в глобальном стейте и сетаешь их при возврате, вместо дефолтных первых n элементов и топСкролл = 0. 3 месяца прошло уже, но может кому-то другому пригодится)
@@Mr.Bellamy проблема была как потом отслеживать обратный скрол и грузить предыдущие. Сколько грузить позиций типа обычно грузишь по 6, а при возврате надо ли сверху и снизу ещё по 6 грузить или только по скролу))
Ты ведь под таблицами подразумеваешь табличную верстку (table, tr, td, display: table и тд)? Просто есть библиотеки, которые и их виртуализировать могут. Из популярных помню react-virtuoso. Можешь в его сторону посмотреть.
@@ayub_begimkulov Да, именно про html таблицу. Но хочу применить для проекта на Ангуляре, так как у нас таблицы очень специфические и с большим объемом данных, в память подгружается до 100 mb, очень тяжко приходится браузеру. Спасибо, посмотрю, как в этой библиотеке реализовано
По шрифту -- дефолты из VSCode на маке (Menlo, Monaco, 'Courier New', monospace) Касательно фонт сайз -- 14px + один раз на cmd+ нажал, чтобы на телефонах тоже все видно было.
Какой «гений» додумался называть виртуальной скролл виртуализацией 💩 Виртуализация обычно относится к созданию виртуальной изолированной системы для исполнения кода абстрагированного от аппаратной реализации. Я уж думал докер напишет или эмулятор, а тут всего лишь виртуальный скролл для которого уже и так десятки библиотек существует 🤭
- "Какой «гений» додумался называть виртуальной скролл виртуализацией" Вот-вот... Есть же устоявшиеся термины: рендеринг - она же "отрисовка"... Автор - в следующий раз будет диз...
![Megan Thee Stallion - Neva Play (feat. RM) [Official Video]](http://i.ytimg.com/vi/TpYTyAaTRts/mqdefault.jpg)
Обьяснил топ🤗
Проблема, пример проблемы и как решать будет.
Топ.
Спасибо!
Так ведь в видео напротив только вертикальная виртуализация ;)
Клевое видео, спасибо!
Ага, перепутал))) Спасибо!
Очень полезный контент! Спасибо за твою работу
Спасибо!
Аюб молотчик!!! Слежу за твоими видео, побольше таких практических кейсов как этот!! Супер!
Спасибо! В планах есть еще похожие плейлисты. Главное, чтобы просмотры не как тут набирались)))
Супер круто! Я наконец добрался всё разом посмотреть)
Буду рад фидбэку по каждой части)
Очень интересно! Буду ждать продолжения!
Да, я тоже!
Скоро должно выйти, вторую и третью часть уже записал. Думаю в ближайшие дни еще четвертую буду записывать)
Супер! Было бы интересно посмотреть подобные "best practies"
спасибо!
Мега полезно! Было бы интересно еще sticky column и row как реализуются.
Коммент подлиннее, для поддержки канала, спасибо, интересно:)
Спасибо за поддержку!
Привет, спасибо за серию видео по виртуальному скроллу, оказалось очень полезно! У меня такой вопрос - почему для конечного item ты указываешь top: 0, а после делаешь transform: translateY(virtualItem.offsetTop)? Почему сразу не установить top в нужную для этого позицию virtualItem.offsetTop? И что ты сказал на 16:41, что какой то транслейт работает более быстро, какой я не могу расслышать)
Очень очень круто, класс)
Спасибо!
Очень интересно, спасибо)
Рад, что понравилось!
я пытался тоже писать свою виртуализацию для списков, имея опыт нативной андроид разработки и так и не осилил кейс с рендерингом элементов различной высоты. в анроиде для этого есть либа recyclerview и я пытался сделать что-то подобное. но фишка в том, что в андроиде у всех компонентов есть стадия измерения, лейаута и собственно отрисовки, и можно эти методы переопределить и посчитать/изменить размеры ещё не отрисованого элемента. как с этим быть в html/js я так и не понял, в предвкушении следующего видео!)
На самом деле тут что-то похожее получается. В определенных стадиях рендеринга компонента производим нужные действия. Правда работать с этим не так просто и очевидно. Спасибо за фидбэк!
Привет, классный ролик с отличным контентом! Возник вопрос, по какой причине было решено использовать addEventListener, а не onSroll на контейнер, были ли какие-то конкретные причины, или это больше для удобства? Спасибо!
скорее для удобства. мы же внутри хука просто доступ к DOM ноде получаем. Не хотелось, чтобы человек еще сам должен был руками вещать наш onScroll обработчик.
Удачи
Спасибо!
отличный контент! спасибо!
объясни, пожалуйста, для чего нужен overscan, с видоса не понял (
Нужно для того, чтобы при быстром скролле ты не видел белый экран. Так как скролл происходит в отдельном треде, который переодический эммитит ивенты в JS.
@@ayub_begimkulov Спасибо за ответ! Забыл удалить вопрос, ибо стало понятно во втором видосе, где ты проговорил тоже самое, что написал в этом ответе :)
ух... помню как делал подобное на чистом js для ie8 в свое время. наигрался знатно, зато скорость работы была космической
IE вообще боль огромная, тем более восьмой. Там получается даже es5 не поддерживался же?
@@ayub_begimkulov ага
❤🎉
хм с ходу не придумал где это использовать для чего такая таблица. кажется не видел таких примеров раньше
Бывают таблицы, где нужно отображать большое количество данных (500+) без пагинации. В таких случаях полезно бывает.
По-моему в данном кейсе было бы лучше использовать intersection observer, чем вешать листенер на скролл
А можешь пожалуйста раскрыть мысль? Не совсем понимаю, как он тут мог бы помочь? IntersectionObsrver больше же про попадание элемента во viewport, то есть нужно, чтобы DOM элемент уже был какой-то. А в нашем случае у нас вообще не рендериться ничего, кроме видимых элементов + overscan.
20:13 А можешь подсказать как ты настраиваешь TS, что он понимает, что это браузерные таймауты которые отдают число, а не нодовские?
У меня просто не стоит @types/node в этом проекте). А так, если можно использовать widnow.setTimeout, для того, чтобы возвращалось число.
@@ayub_begimkulov обычно так и поступаю, поэтому удивился. Спасибо
Как раз что такое хочу сделать в проекте, я делал с intersection observer, с бека приходят товары по 6шт например, в экран влезает 4шт, и когда скрол доходит до предпоследнего загпуженного товара кидается запрос на бек. Но теперь проблема, когда юзер открывает страницу товара и выходит назад, как то надо сохранять, товары которые он просмотрел, либо только кусок прошлого списка, но тогда придётся ещё скрол наверх обрабатывать как то))
Дак а в чем проблема? Текущий отображаемый список и позицию скролла хранишь в глобальном стейте и сетаешь их при возврате, вместо дефолтных первых n элементов и топСкролл = 0.
3 месяца прошло уже, но может кому-то другому пригодится)
@@Mr.Bellamy проблема была как потом отслеживать обратный скрол и грузить предыдущие. Сколько грузить позиций типа обычно грузишь по 6, а при возврате надо ли сверху и снизу ещё по 6 грузить или только по скролу))
🎉🎉🎉🎉🎉
Очень жаль, что данный подход с абсолютным позиционированием не подходит для таблиц. А так решение хорошее
Ты ведь под таблицами подразумеваешь табличную верстку (table, tr, td, display: table и тд)?
Просто есть библиотеки, которые и их виртуализировать могут. Из популярных помню react-virtuoso. Можешь в его сторону посмотреть.
@@ayub_begimkulov Да, именно про html таблицу. Но хочу применить для проекта на Ангуляре, так как у нас таблицы очень специфические и с большим объемом данных, в память подгружается до 100 mb, очень тяжко приходится браузеру. Спасибо, посмотрю, как в этой библиотеке реализовано
какой шрифт и фонт-сайз?
По шрифту -- дефолты из VSCode на маке (Menlo, Monaco, 'Courier New', monospace)
Касательно фонт сайз -- 14px + один раз на cmd+ нажал, чтобы на телефонах тоже все видно было.
@@ayub_begimkulov, благодарю
Какой «гений» додумался называть виртуальной скролл виртуализацией 💩 Виртуализация обычно относится к созданию виртуальной изолированной системы для исполнения кода абстрагированного от аппаратной реализации. Я уж думал докер напишет или эмулятор, а тут всего лишь виртуальный скролл для которого уже и так десятки библиотек существует 🤭
Виртуализированное отображение списков/контента наверное правильнее, но в контексте фронтенда обычно только это и бывает, по этому так сокращают
извини бро, это я так назвал
- "Какой «гений» додумался называть виртуальной скролл виртуализацией"
Вот-вот... Есть же устоявшиеся термины: рендеринг - она же "отрисовка"...
Автор - в следующий раз будет диз...
Кому надо, всё понял))
@@konstantinsamodurov436ну заплачь
Виктор Карпов делал похожее и называл "Виртуальный лист".) Это для умников про докер. 😂 Кто-то есть его уровня викомментах? 😂
🎉🎉🎉🎉🎉