我正在尝试执行将内部 div 向下滚动到某个元素的代码。只有在以下情况下才有效：

但正如你们所知，这对整个事情的表现不利。

进行滚动的代码是：

我怎么能做这样的事情，但无头等于 True？

背景

我正在创建一个单页网站。它几乎完成了，而且效果惊人！但是有一个错误我永远无法修复。当单击支持的锚点（链接到某个部分）时，我将滚动到该部分，而不是重新加载页面。

如果该部分已经加载，它会正常滚动到该部分。

如果未加载，则将请求排队等待稍后。这是发生错误的时候。 它不是滚动到主页，而是在它的下方滚动。如果请求投资组合，它会向上滚动一半。

重现步骤

假设我继续从事这个设计，可以在我的网站上查看：https ://cjloewen.ca/ 。

1. 刷新页面。出于测试目的，部分不会加载 10 秒。
2. 加载时，可以请求任何部分。如果该部分当前未加载，链接旁边将显示加载图标。
3. 加载请求的部分后，加载将停止，它将等待用户停止滚动，然后使用 滚动到请求的部分elem.scrollIntoView({ behavior: 'smooth', block: 'start' });。

我试过的

• 我已经验证它正在滚动到正确的元素，并且没有其他元素。
• 我切换到使用 MutationObserver 来了解元素何时添加到 DOM。
• 我尝试在滚动之前等待 requestAnimationFrame 。
• 我尝试在滚动之前添加一个短暂的 500 毫秒超时。
• 我尝试在滚动之前添加 60 秒超时，以确保我在任何时候都没有与页面交互。
• 我尝试使用 scrollTo 而不是 scrollIntoView 滚动（相同的行为）。
• 我在 Edge 中尝试过（行为略有不同但问题相同）。

源代码

所有相关的源代码都可以在https://cjloewen.ca/js/main.js找到（包括源图）。

• 我在第 156 行插入部分。

• 我在第 80 行锁定加载。

• 我在第 84 行等待用户停止滚动。

• 在第 73 行调用 scrollIntoView。

任何帮助是极大的赞赏！

我在 ngAfterViewInit 生命周期挂钩内的元素上使用 scrollIntoView 方法。如果我开始调试，我可以看到滚动实际上最初完成了它的工作，但随后页面被重置并滚动到顶部。

例子：

解决此问题但不适合我的情况的事情：

• 另一方面，使用 `{behavior: 'smooth'} 效果很好，但我不想在我的情况下使用它。
• 在 setTimeout(() => scrollIntoView, 100) 内执行 scrollIntoView 可行但感觉很hacky？

关于为什么会发生这种情况以及 setTimeout 是否是最佳解决方案的任何想法？

我想知道如何使用 Reactrefs导航到特定组件

应用标头

应用菜单

我在 Apps.js 中使用 ClickHandler 和scrollIntoView. 但实际上当我单击视图时不会滚动。

我不会使用像react-scroll这样的包

我有一个触发此功能的 onclick：

它将页面滚动到特定像素（div）并将其居中。当然，scrollIntoViewOptions 在 Safari 中不起作用，所以我想退回到 scrollIntoView() 或 scrollTo()。

我试过了：

和

但没有启动滚动。我什至没有 JS 如何工作的基本知识，所以答案可能与基础有关，但我无法找到解决方案。我想我只需要测试 scrollIntoViewOptions 是否有效，如果为 true，则运行一个脚本，如果为 false，则运行另一个脚本。

答案赞赏，谢谢。

我有一个反应功能组件定义为

我正在尝试使用 ref 使选定的列表项滚动到视图中，但无法获得预期的结果。但是，如果我尝试在挂钩处添加调试断点，它会按预期工作并在视口中滚动元素。

我还尝试将我的 scrollIntoView 包装在 setTimeout() 中，该方法有效，但它不止一次地滚动它并导致不和谐的效果。

我有一个文本数组，我正在使用 array.map() 函数迭代它以创建<li>包含文本的元素。该文本带有一个唯一的 id 值，我将其用作keyReact 在地图中所需的值。循环看起来像这样（不要介意 html 集，这都是将被替换的临时内容）：

我想要的是，在这个组件完成渲染之后（即在<li>创建这些之后），页面将自动滚动到查看这些元素中的特定一个，给定e.id作为道具传递给包含该组件的相同值代码。

我知道Element.scrollIntoView()基本 DOM 功能中的常规功能，但我不确定如何将它与我已经拥有的 React 结合使用。如果有的话，我应该在哪里调用该函数（大概在componentDidMount？）以及如何从我映射的数组中获取具有给定键的元素，以便将其传递给该滚动函数？

我有以下代码：

HTML

问题是它更改了选项卡并滚动了一下，但实际上并没有滚动到我可以看到所选选项卡的位置。它只是归结为选项卡的标题。

有没有办法在标签标题下滚动它而不是仅仅滚动到标题？

解决方案

万一有人偶然发现它，这可以解决它：

这是我的代码：

我已经查看了scrollIntoView的文档，但似乎没有找到设置平滑过渡速度的方法。理想情况下，我希望设置一个以毫秒为单位的时间来告诉浏览器滚动必须持续的持续时间（就像可以使用 CSS 中的过渡属性一样）。您知道是否有解决方法来实现这一目标？太感谢了。

我正在尝试使用 css 样式效果创建 jquery 平滑滚动过渡。我想通过jquery将“滚动行为：平滑”添加到主html标签中，然后立即删除滚动效果平滑，这样html标签就不会保持滚动效果并影响网站的其他部分。我通过编写以下代码进行了尝试：

这不起作用；它只是导致它根本没有滚动效果，所以我尝试了这种方法：

第二种方式添加效果，但是html标签保持“滚动效果：平滑”，不移除。关于如何解决这个问题的任何建议？