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

Question

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

我目前的方法是：

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

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

Answer 1

这些实际上是两个好主意。 Venmo的演示使用由滚动控制的HTML5视频。

我相信你可以通过遵循in this article建议的方法来做到这一点。

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