问题标签 [react-scroll]

所以我正在制作一个投资组合网站，部分原因是为了练习反应，部分原因是它是保存我的项目的好地方。我想使用 react-scroll 因为它的功能符合我想要的设计主题，但我遇到了一个非常小的障碍。无论出于何种原因，当我滚动 .active 功能时都可以正常工作，但是当我单击按钮时，它仅在某些时候有效。

这似乎是因为它跳转到页面上实际部分之前，但我不知道如何修复它。我尝试弄乱偏移量，但这只会产生其他问题/问题仍然存在于不同的位置。我确信我可以通过创建自己的滚动对象来解决它，但我觉得必须有一种方法可以只使用 Link 对象来做到这一点，因为它的布局并不太复杂。

所涉及组件的代码如下

应用程序.js

应用程序.css

边栏.js

如果您想查看其余部分，这是 github 存储库： https ://github.com/jtlaughton/Portfolio

编辑：这似乎只在全屏时发生。也更新了一个更明智的

当它们是项目时，我希望有一个滚动条，但是当没有任何东西可以滚动时不会出现滚动条。

如果我使用它，它会删除它，但在所有情况下。如果滚动条不为空，我想查看它：

有什么建议么？

我正在尝试的是一个多页反应应用程序，我可以在页面之间导航（比如从主路由'/'到'/whitepape'或'privacyPolicy'），但我有4个不同的路由（'/'，'services ', 'features', 'contactUs') 在主路由 '/' 中，它使用 react-scroll 在导航栏中添加链接的 4 个组件之间滚动（这部分按预期工作）。

但是在页面之间导航就像用白皮书页面或privacyPolicy页面完全替换所有4个组件，导航栏和页脚在同一个地方，这样我就可以导航回主页。

这就是我所坚持的任何帮助，不胜感激我不确定我是否遵循正确的方法来实现我需要的东西。我一直在 React Native 中使用 React Navigation，它易于理解和直接，希望 react-router 如此简单，而不是 react-router 有点令人困惑。

应用程序.js

导航栏.js

页脚.js

我想跳转到页面的特定部分/组件。所以我使用了 React-Scroll 但它总是从顶部开始滚动。但我想从我在页面上的位置滚动。下面是代码片段。

这是主要组件`

`

所以基本上我想要一个滚动视图并通过滚动或单击链接从标题页导航到关于等。我正在尝试使用 react-scroll 包，但由于某种原因，我没有可滚动的视图并且链接不起作用！我所能看到的 - 主屏幕，所有组件都在同一页面上！

应用程序.js

页眉.js

关于.js

我正在尝试使用 React.js 和react-scroll来模拟Tesla的网络应用登陆页面滚动行为

假设我们有 2 个部分，主图是第 1 部分，并且在用户的一个小滚动中，触发了一个事件，它向下滚动到下一个部分（第 2 部分）

我的问题是当用户在第 1 部分向下滚动时，我如何触发滚动事件以滚动到第 2 部分，类似于特斯拉登录页面。

我已经使用 offsetY 上的侦听器和一个条件来实现它，如果它等于 100px if (offsetY === 100)，则窗口将滚动到第 2 部分。但这只能在等效于 100 的情况下实现。换句话说，当且仅如果它相对于文档满足 100px。

任何想法或建议都会很有用。

我想在滚动此组件时突出显示导航菜单。

如果导航栏是“关于产品的主页”

当我在关于部分滚动时，关于导航菜单将被激活或突出显示。

我怎么能在反应中做到这一点，是否有任何 npm 包呢？

问题陈述： 单击反应滚动链接时，该链接未突出显示（我使用过spy）并且它没有滚动到 div 而只是登陆到页面。

还有其他有效的方法吗？正如我正在学习做的反应

页面上下文组件：

有一个主页组件

布局组件：

配置文件视图组件：

另一个视图组件

标题组件：

第一次正确执行该功能，之后一直单击按钮 - 不。我认为它会在某个地方终止。我认为在某些检查点中，出于某种原因，该值是空的，也许这就是它不执行的原因，ebacsie 第一次总是正确执行，之后总是 - 不。之后的所有时间我都看不到“功能几乎完成执行”的控制台日志

预期的行为是有一个图标箭头，onClick 将在导航中打开/关闭主链接的子链接列表。

像这样：

图标是“>”，链接是 somelink

当 somelink 被点击时，我想要的导航外观是：“<” somelink link1 link2 link3 （以便打开子菜单）

我正在使用 React 钩子。请帮帮我，我做错了什么？

从昨天开始，我一直在尝试解决该错误，但仍然没有运气。我将简要解释一下。

期望

我正在使用 React ScrollSpy Nav Library 根据当前滚动文章的 id 在网页上实现活动链接突出显示功能。

不要对我设置链接的方式感到困惑，我只是使用 reacti18next 来适应不同语言的链接，因此更容易动态添加它们并限制复制粘贴。

我希望突出显示活动链接，并且onClick -+- 通过其 id 滚动到所需的文章。

当调用 onScroll 事件时，当脚本尝试添加或删除 .is-active类名时，我收到错误“无法读取 null 的属性类列表” 。我一直在尝试解决它并得出一个结论，即发生的事情是（按升序，颠倒）：

3)

t.getNavLinkElement(r)返回 null，因为（这是该函数的实现 - getNavLinkElement）：

2)

因为这里这是未定义的，正如我在 devtools 调试器范围的块中探索的那样。这是未定义的，但 r 和 n 是 =“定义”和 0（如预期的那样）

3)

这里是 this.hashIdentifier 设置的地方：

Classe的构造函数

这是我的 React 代码，我在其中初始化了 React Scrollspy Nav 组件，并设置了链接，等等。它是导航组件：

它的文章组件：

我想了解为什么“this”未定义。

重要的提示！

我附加的代码块（除了 React 组件的代码块）来自 react-scrollspy-nav node_module 的文件夹，因此我无法编辑这些函数中的代码。我只能编辑 React 组件的代码。

PS：我通过 npm 安装了包（更准确地说是 yarn），这里是该库的 github 完整源代码：https ://github.com/StephenWeiXu/react-scrollspy-nav 。如果我没有提供足够的代码片段，请查看它。该库几天前可以工作，但我偶然删除了项目的文件，无法恢复，现在重新实现所有内容。