我应该如何创建类似于 Venmo 的应用演示？

Question

我正在尝试重新创建一个类似于 Venmo 在此处 https://venmo.com/about/product/ 的演示。

我目前的做法是：

1. 滚动事件监听器 - 添加一个事件侦听器，用于滚动并按绝对位置扫描文档区域以获取元素列表，并根据 div 的键/id/类更新状态。 优点：单个事件侦听器，缺点：必须解析元素列表才能找到 key/id/class，可能不可靠？

2. 位置事件监听器 - 在每个 div/card 上添加事件侦听器，并在元素位置通过条件时更新状态。 优点：可能更易于实现，缺点：多个事件监听器

其中哪一个是更好的方法，有什么我没有想到的吗？

Answer 1

这实际上是两个很好的想法。 Venmo 的演示使用由滚动控制的 HTML5 视频。

我相信您可能只需按照建议的方法即可做到这一点 in this article.

解释的要点是，您最初将滚动元素的高度设置为对应于视频的长度，并将其用作滚动计算的一部分。我不会担心尝试根据页面上的元素来定位自己，而是在根据自己的喜好调整滚动后将元素放置在适当的位置。