JS。如何跟踪同一容器内三个独立部分的进度

Question

请参阅 Codepen 以更好地理解我要解释的内容。您可以在滚动时跟随控制台查看代码中变量的值。

在第 2 部分中，我有三个面板（面板 1、面板 2 和面板 3），我想在滚动时通过三个单独的进度条跟踪它们。因此，当我滚动浏览第 2 部分时，面板 1 处于视图中 - 面板 1 的进度条应该填充，面板 2 和面板 3 的进度条应如此。

要查看面板 1，第 2 部分从 0% 开始到 22% 结束，（我认为）是： sectionProgress / 22 - sectionProgress 是我在第 2 部分滚动的程度。但是，面板 2 从第 2 部分的 22% 开始到 75%，结束而面板 3 从 75% 开始到 100% 结束 <- 并且 这就是我不知道要使用什么公式的地方。

更简单地说：

当 面板 1 处于视图中时：

第 2 部分的 0% === 面板 1 进度条上的 0%
。 . .
第 2 部分的 22% === 面板 1 进度条上的 100%

当 面板 2 处于视图中时：

第 2 部分的 22% === 面板 2 进度条上的 0%
。 . .
第 2 部分的 75% === 面板 2 的进度条上的 100%

当 面板 3 处于视图中时：

第 2 部分的 75% === 面板 3 的进度条上的 0%
。 . .
第 2 部分的 100% === 面板 3 的进度条上的 100%

Answer 1

对于面板 2，您必须计算滚动位置 22% 到 75% 之间的百分比。你是从 0% 到 75% 计算的。（必须对面板 3 应用相同的逻辑。）

if(sectionProgress < 22) {
  percentagePanelTwo = 0
} 
else if(sectionProgress <= 75) {
  percentagePanelTwo =  (sectionProgress - 22) / (75-22)
} else {
  percentagePanelTwo = 1;
}

另一个代码改进是删除每个面板计算周围的 ifs

 // remove => if (scrolledFromTop >= sidePanelOffsetPanelOne) {

因为如果用户再次向上滚动，这将阻止进度条缩小。

请注意，在上面的第一个代码示例中，我处理了所有三种情况：

percentagePanelTwo 为 0，如果滚动在面板之前
percentagePanelTwo 的变量值，如果滚动在第二面板中
并且 percentagePanelTwo = 1 如果滚动在面板二之后

Answer 2

如果您对没有那二十个 GSAP 相关依赖项的更“纯粹”的解决方案持开放态度，这里是您当前构建的重现，利用 CSS 滚动捕捉与 JS 事件侦听器配对淡出在每个部分的不同背景颜色之间，并相应地填充清空进度条。

这里还有一个注意事项，为了流畅的用户体验，由于第一个面板在滚动阈值之上开始，用户通常必须滚动过去才能开始填充相关的进度条，我有条件地设置了 smooth class 在进度条容器上启用 CSS 过渡，当进度条接近任一边缘时，在左侧或右侧。

当不靠近边缘时，不需要过渡，所以class被移除。在不需要时进行过渡实际上会导致另一个不良副作用，其中一个柱可能会在另一个柱完全结束之前开始填充 fills/empties。

这是我的解决方案，具有 0 个依赖项： https://codepen.io/brandonmcconnell/pen/f58fd03211eaf02467b1e92c116042b6?editors=0010

JS。如何跟踪同一容器内三个独立部分的进度

JS. How to track progress of three separate sections within the same container

javascript

jquery

progress-bar

gsap