在 React 中观察目标位置：无缝滚动检测和动态内容样式

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

在此处查看演示。

在这里访问主页。

包装内有什么？

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

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

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

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

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

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

可能的用例

如何开始

启动并运行这个包非常简单。首先，通过 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) 的封面照片