页面某一部分的滚动指示器

Question

任何人都可以解释如何在 React 中为某个部分构建滚动指示器。我想要一条垂直线，当用户滚动到特定部分时开始填充，并在用户滚动到该部分末尾时填充到 100%。

我只需要一个部分的滚动指示器

Answer 1

您可以研究动画的framermotion。他们有一个非常详细的示例，说明如何实现您想要的目标。

https://www.framer.com/motion/scroll-animations/

如果您不想包含整个库来为某一部分设置动画，您可以尝试仅使用 javascript，但这会非常复杂。

您可以尝试使用以下方法获取容器内的滚动位置：

  useEffect(() => {
    const handleScroll = () => {
      // scroll handlers here }
    };
    containerName.addEventListener("scroll", handleScroll);
  }, []);

您将需要跟踪容器高度、容器高度内的滚动位置并计算容器内的滚动百分比并使用 useState 更新值。