您是否曾经在滚动浏览一大段内容时迷失方向，想知道自己在宏伟的计划中处于什么位置？我们都去过那里。为了让事情变得更简单，我创建了一个简单的 npm 包，它可以通过在滚动时更新目录 (toc) 来帮助您跟踪页面上的位置。无论您是在开发文档网站还是包含多个部分的项目，此包都可以为您提供帮助。

在此处查看演示。

在这里访问主页。

包装内有什么？

此软件包包含三个组件和一个挂钩，可以轻松将滚动跟踪集成到您的网站中：

1. inviewprovider：这就像操作的大脑。它会跟踪当前正在查看的部分并确保一切保持同步。只需将其包裹在应用程序中要启用滚动跟踪的部分即可。

2. 目标：将此视为您在内容的每个部分上放置的标签。通过使用 target 组件包装您的部分，您可以告诉包，“嘿，请注意这个！”

3. observezone：这是所有动作发生的空间。它是一个不可见的组件，可以监视您的内容和目标，确保目录在您滚动时更新。

4. useinview：一个方便的钩子，让您知道某个部分何时处于视图中。这非常适合触发动画、延迟加载内容或您希望在某个部分进入视图时发生的任何其他情况。

为什么您可能会发现这很有用

• 让用户保持正轨：当用户滚动浏览您的内容时，他们可以轻松看到他们正在阅读的部分，因为目录会自动更新。不再迷失在长页面中！

• 多功能用例：虽然它非常适合文档站点，但您也可以将此包用于其他用途，例如在某些部分进入视图时触发动画、延迟加载内容以节省资源，或者甚至在用户滚动时进行 api 调用。

• 易于实施：该包设计简单。只需几个组件和一个钩子，您就可以轻松地将其添加到您的 react 项目中。

可能的用例

• 文档站点：非常适合将目录项与内容部分链接起来，以便用户始终知道它们在哪里。

• 动画和效果：想要添加一些风格吗？使用 useinview 钩子在某个部分进入视口时触发动画。

• 延迟加载内容：仅在需要时加载组件，从而节省加载时间。

• 动态 api 调用：当用户滚动页面时动态获取数据或加载内容。

如何开始

启动并运行这个包非常简单。首先，通过 npm 安装它：

npm install target-observer

然后，在项目中使用组件，如下所示：

import { InViewProvider, Target, ObserveZone, useInView } from 'target-observer';

function DocumentationPage() {
  return (
    <inviewprovider targetids='{["section1",'><div style="{{" position:>
       <observezone></observezone><tableofcontents></tableofcontents><main><target id="section1"><section1></section1></target><target id="section2"><section2></section2></target>
           {/* Add more sections as needed */}
         </main>
</div>
    </inviewprovider>
  );
}

就是这样！通过这几行代码，您的目录将随着用户滚动而更新，使导航变得轻而易举。

包起来

这个 npm 包是增强网站导航的简单而有效的方法。无论您正在处理文档还是任何其他内容丰富的项目，此工具都有助于使事情井井有条且用户友好。我希望你发现它和我一样有用！

unsplash 上帕特里克·亨德利 (patrick hendry) 的封面照片

以上就是在 React 中观察目标位置：无缝滚动检测和动态内容样式的详细内容，更多请关注php中文网其它相关文章！