React 中的 ref scrollIntoView 在 behavior smooth 选项下无法工作。

Question

我正在创建一个组件，它将包含动态元素列表，并且出于样式原因，我需要在粘性导航菜单中保留每个部分的标题。当用户向上或向下滚动部分列表时，我需要应用样式规则，并将相同的部分显示在菜单导航中，因此我尝试使用具有菜单部分引用的scrollIntoView。

我的内部工作和逻辑似乎按预期工作，但有一个问题-除非我检查页面或刷新页面，否则scrollIntoView函数不会在每个状态更改上执行。

const scrollTo = (ref) => {
  ref.current.scrollIntoView({ behavior: "smooth", inline: "center" });
};

为了简短明了，我已经将我的工作添加到codesandbox中。

如果您能提供任何帮助，我将不胜感激，因为我已经没有任何想法。

谢谢！

编辑：

如果我从scrollIntoViewOptions选项的behavior参数中删除“smooth”选项，则滚动行为似乎按预期工作。然而，它看起来有些跳跃。

const scrollToMenu = (ref) => {
  ref.current.scrollIntoView({ inline: "center", });
};

- Gareth Townsend

---

请注意，它在Firefox上可以正常工作。 - Monstar

谢谢你的回复... 我很想知道如何处理这个问题，以支持大多数主流浏览器。 - Gareth Townsend

我在Chrome和Brave浏览器上遇到了同样的问题，我的scrollIntoView函数在启用behavior: smooth时完全不起作用。当我移除smooth属性后，它可以正常工作，但这肯定不能提供良好的用户体验。你解决这个问题了吗？ - MLyck

Answer 1

有趣的是，当同步调用scrollIntoView()时，它不起作用，但在我的情况下，将其放入setImmediate()中就可以正常工作：

const scrollToMenu = (ref) => {
    setImmediate(() => ref.current.scrollIntoView({ inline: "center", }));
};

- Jthorpe

---

谢谢，我不明白为什么这个能够工作，但它确实可以。 - Arthur Clerc-Gherardi

Answer 2

在我的情况下，setImmediate() 不可用，但 setTimeout() 适合我的目的：

const scrollTo = (ref) => {
    setTimeout(() => ref.current.scrollIntoView({ inline: 'center', behavior: 'smooth' }), 777)
}

- Blake Frederick

---

将延迟设置为0对我有用。setTimeout(() => ref.current.scrollIntoView({ behavior: 'smooth' }), 0) - Emmanuel Kasongo Mavetya