Блог

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

Мои текущие подходы:

1. Прослушиватель событий прокрутки — добавьте прослушиватель событий для прокрутки и сканирования области документа по абсолютной позиции для списка элементов и состояния обновления на основе ключа / идентификатора / класса div. Плюсы: один прослушиватель событий, минусы: необходимость анализировать список элементов, чтобы найти ключ / идентификатор / класс, возможно, ненадежный?
2. Прослушиватели событий позиции — добавьте прослушиватели событий в каждый div / card и обновите состояние, когда позиция элемента проходит условия. Плюсы: возможно, проще реализовать, минусы: несколько прослушивателей событий

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

На самом деле это две хорошие мысли. В демо-версии Venmo используется видео HTML5, которое управляется прокруткой.

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

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