Как реализовать бесконечный(почти) календарь?

Question

[dataWave]

clauderic.github.io/react-infinite-calendar/#/basi...
Необходимо реализовать подобный календарь со скроллом вверх и вниз.
Проблема в том, что необходимый диапазон лет в моем случае - 200. А в данном решении просто зарендерили 70, разом.
Как вы понимаете 200 лет грузить разом - слишком затратно для производительности, а частями грузить у меня не получилось, т.к после перерендера меняется высота блока и после вставки, например, предыдущего года, он показывает верхушку контента, сбрасывая скролл в начало блока.

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

Как можно совладать с прыгающим скроллом и незаметно для пользователя генерировать и вставлять данные?
Пишу на react hooks.

Answer 1

[Денис Инешин]

Довольно сомнительное решение с точки зрения дизайна интерфейса.
На 70 лет то тяжело управлять и скролить в нужное место, а уж на 200 лет - да в жизни не перемотаешь куда надо.

Но если все-таки очень нужно, то лучше вам сменить подход к проблеме. Смотрите:
1. Пользователь может неспешно проматывать вниз (можно загружать по мере прокрутки)
2. Пользователь может сразу ткнуть в конец или в середину (а вот тут проблема придется подгрузить все то, что пользователь проскочил).

Но проблему уже решили до нас создатели карт!
Будь то гугл.карты, яндекс.карты или что-то еще - там все грузится и рендерится совершенно по другому, в зависимости от координат, которые вы открыли.

Соответственно вашу задачу можно будет решить похожим образом.

1. Вы создаете огромный (но полностью пустой) слой. Шириной с ваш календарь, и высотой во много тысяч пикселей
2. Эту высоту вы вычислите исходя из кол-ва лет что у вас в конфиге.
3. Далее после того как юзер проскролил на какую-то точку - вы должны будете вычислить вьюпорт + scrollTop
4. На основании этих данных вы отрендерите только 2-3 года календаря которые совпадают с координатами на которые проскролил юзер и покажите их в этих координатах с помощью position-absolute
5. Примерно так.

+ Данный метод гораздо надежнее чем прокрутка подряд и черная магия с дорисовкой элементов и прыгающим скроллом
+ Данный метод позволит вам рендерить только те части календаря которые видит пользователь. То что вне вьюпорта - отрендерено не будет и соответственно не будет тормозить.
- Придется хорошенько посидеть, подумать, вспомнить матан)

Comments

[dataWave]

думал над этим, но проблема в том, что высота каждого года разная, соответственно и высота по дизайну разнится. Мне получается нужно высчитать количество недель в каждом месяце за 200 лет и на этом основании высчитывать высоту?

[Денис Инешин]

dataWave, все можно рассчитать, учесть все поправки (вроде 30/31 день) високосный год или нет, с какого дня недели начинается.

Немного матана.

[dataWave]

не могли бы вы описать, что будет происходить пошагово при скролле в одну сторону до упора?

[Денис Инешин]

Тоже самое что скрол в любую точку.

Вы переодически будете вычислять вьюпорт - и высылать его вашей рендер функции, а она (имея под капотом мощный матан :) разберется что рисовать, а что нет.

[dataWave]

Скролл в моем календаре вообще скрыт, так что здесь попроще будет.
То есть моя рендер функция получает координаты вьюпорта, по этим координатам определяет какой это год и рендерит его?

[dataWave]

и еще один вопрос, раз это сомнительное решение, то какое тогда ограничение является вменяемым, и какое было бы решение в таком случае? с теми же самыми расчетами?))

[Денис Инешин]

Ну это не сомнительное решение, просто сложное. Но зато надежное.

Answer 2

[Karpion]

Ну, я бы сделал как-то иначе, примерно так:
Есть окно примерно на один месяц, т.е. на шесть недель (т.к. месяц на 31 день занимает четыре недели три дня, причём эти три дня м.б. в разных неделях). В нём показывают ровно то, что влезает. Склоллинг колёсиком мышки приводит к перемещению на одну неделю за клик колёсика. При этом никакого скролл-бара справа нет, там строго шесть недель.

А сбоку - возможность кликом выбрать месяц и год. Не выпадающий список, а всегда развёрнутый; месяцы должны влезть на экран, а годы - со скроллом. Впрочем, нужен ли скролл - должно определяться по факту того, влез ли список в экран.