Как мне подойти к созданию демо-приложения, похожего на Venmo?

Question

Я пытаюсь воссоздать демо-версию, похожую на ту, что была у Венмо https://venmo.com/about/product/.

Мои нынешние подходы:

1. Прослушиватель событий прокрутки - Добавьте прослушиватель событий для прокрутки и сканирования области документа по абсолютной позиции для получения списка элементов и обновления состояния на основе ключа div / id / class. Плюсы: один прослушиватель событий, Минусы: необходимость разбирать список элементов, чтобы найти ключ / идентификатор / класс, возможно, ненадежный?

2. Позиционные слушатели событий - Добавьте прослушиватели событий на каждую карту / карту и обновите состояние, когда положение элемента проходит условия. Плюсы: возможно, проще в реализации, Минусы: несколько слушателей событий

Какой из них был бы лучшим подходом, есть ли что-то, о чем я не думаю?

Answer 1

Это на самом деле две хорошие мысли. Демонстрация Venmo использует видео HTML5, которое контролируется прокруткой.

Полагаю, вы могли бы сделать это, просто следуя предложенному подходу в этой статье .

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