#javascript #reactjs #dom-events #react-dom
#javascript #reactjs #dom-события #react-dom
Вопрос:
Я пытаюсь воссоздать демо-версию, похожую на Venmo здесь https://venmo.com/about/product /.
Мои текущие подходы:
- Прослушиватель событий прокрутки — добавьте прослушиватель событий для прокрутки и сканирования области документа по абсолютной позиции для списка элементов и состояния обновления на основе ключа / идентификатора / класса div. Плюсы: один прослушиватель событий, минусы: необходимость анализировать список элементов, чтобы найти ключ / идентификатор / класс, возможно, ненадежный?
- Прослушиватели событий позиции — добавьте прослушиватели событий в каждый div / card и обновите состояние, когда позиция элемента проходит условия. Плюсы: возможно, проще реализовать, минусы: несколько прослушивателей событий
Какой из них был бы лучшим подходом, есть ли что-то, о чем я не думаю?
Ответ №1:
На самом деле это две хорошие мысли. В демо-версии Venmo используется видео HTML5, которое управляется прокруткой.
Я полагаю, что вы, вероятно, могли бы сделать это, просто следуя подходу, предложенному в этой статье.
Суть объяснения заключается в том, что вы изначально устанавливаете высоту элемента прокрутки в соответствии с длиной видео и используете это как часть ваших вычислений при прокрутке. Я бы не стал беспокоиться о том, чтобы пытаться ориентироваться на основе элементов на странице, а вместо этого разместил элементы в соответствующих местах после того, как вы настроили прокрутку по своему вкусу.
Комментарии:
1. Спасибо за ваш вклад, это именно то, что я искал!
2. @JeruKim не забудьте отметить как ответ, если это было полезно для вас.