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

Question

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

我当前的方法是：

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

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

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

Answer 1

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

我相信您可能可以按照建议的方法进行操作 in this article。

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