您是否曾经在滚动浏览一大段内容时迷失方向，想知道自己在宏伟的计划中处于什么位置？我们都去过那里。为了让事情变得更简单，我创建了一个简单的 npm 包，它可以通过在滚动时更新目录 (toc) 来帮助您跟踪页面上的位置。无论您是在开发文档网站还是包含多个部分的项目，此包都可以为您提供帮助。
在此处查看演示。
在这里访问主页。
包装内有什么？
此软件包包含三个组件和一个挂钩，可以轻松将滚动跟踪集成到您的网站中：
inviewprovider：这就像操作的大脑。它会跟踪当前正在查看的部分并确保一切保持同步。只需将其包裹在应用程序中要启用滚动跟踪的部分即可。
目标：将此视为您在内容的每个部分上放置的标签。通过使用 target 组件包装您的部分，您可以告诉包，“嘿，请注意这个！”
observezone：这是所有动作发生的空间。它是一个不可见的组件，可以监视您的内容和目标，确保目录在您滚动时更新。
useinview：一个方便的钩子，让您知道某个部分何时处于视图中。这非常适合触发动画、延迟加载内容或您希望在某个部分进入视图时发生的任何其他情况。
为什么您可能会发现这很有用
让用户保持正轨：当用户滚动浏览您的内容时，他们可以轻松看到他们正在阅读的部分，因为目录会自动更新。不再迷失在长页面中！
多功能用例：虽然它非常适合文档站点，但您也可以将此包用于其他用途，例如在某些部分进入视图时触发动画、延迟加载内容以节省资源，或者甚至在用户滚动时进行 api 调用。
易于实施：该包设计简单。只需几个组件和一个钩子，您就可以轻松地将其添加到您的 react 项目中。
可能的用例
文档站点：非常适合将目录项与内容部分链接起来，以便用户始终知道它们在哪里。
动画和效果：想要添加一些风格吗？使用 useinview 钩子在某个部分进入视口时触发动画。
延迟加载内容：仅在需要时加载组件，从而节省加载时间。
动态 api 调用：当用户滚动页面时动态获取数据或加载内容。
如何开始
启动并运行这个包非常简单。首先，通过 npm 安装它：
npm install target-observer
然后，在项目中使用组件，如下所示：
import { InViewProvider, Target, ObserveZone, useInView } from 'target-observer';
function DocumentationPage() {
return (
<InViewProvider targetIds={["section1", "section2"]}>
<div style={{ position: "relative" }}>
<ObserveZone />
<TableOfContents />
<main>
<Target id="section1"><Section1 /></Target>
<Target id="section2"><Section2 /></Target>
{/* Add more sections as needed */}
</main>
</div>
</InViewProvider>
);
}
就是这样！通过这几行代码，您的目录将随着用户滚动而更新，使导航变得轻而易举。
包起来
这个 npm 包是增强网站导航的简单而有效的方法。无论您正在处理文档还是任何其他内容丰富的项目，此工具都有助于使事情井井有条且用户友好。我希望你发现它和我一样有用！
unsplash 上帕特里克·亨德利 (patrick hendry) 的封面照片
