ref scrollIntoView不适用于react上的行为平滑

Question

我正在创建一个组件，该组件将包含元素的动态列表，出于样式的原因，我需要将每个部分的标题保留在粘性导航菜单中。当用户上下滚动部分列表时，我需要应用样式规则，并将菜单导航中的同一部分带入视图，因此我尝试将scrollIntoView与菜单部分参考一起使用

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

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

为了简短起见，我已经将我的工作添加到这个代码沙盒中

任何帮助都将不胜感激，因为我已经没有主意了。

感谢

编辑：

如果我删除"；光滑的"；scrollIntoViewOptions选项中行为参数中的选项。然而，它看起来确实很紧张。

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

Answer 1

奇怪的是，scrollIntoView()在同步调用时不起作用，但在我的情况下，将其放入setImmediate()中效果良好：

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

Answer 2

在我的案例中，setImmediate()不可用，但setTimeout()适合我的目的：

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