当前位置：首页 > 文章列表 > 文章 > 前端 > 在 React 中观察目标位置：无缝滚动检测和动态内容样式

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

来源：dev.to 2024-09-06 14:42:50 0浏览收藏

推广推荐

支持 PC / 移动端，安全直达

小伙伴们有没有觉得学习文章很有意思？有意思就对了！今天就给大家带来《在 React 中观察目标位置：无缝滚动检测和动态内容样式》，以下内容将会涉及到，若是在学习中对其中部分知识点有疑问，或许看了本文就能帮到你！

您是否曾经在滚动浏览一大段内容时迷失方向，想知道自己在宏伟的计划中处于什么位置？我们都去过那里。为了让事情变得更简单，我创建了一个简单的 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>
  );
}

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