ref scrollIntoView 不适用于反应平滑的行为答案

【问题标题】：ref scrollIntoView does not work with behavior smooth on reactref scrollIntoView 不适用于反应平滑的行为
【发布时间】：2022-08-10 04:21:21
【问题描述】：

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

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

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

为了简短起见，我已将我的工作添加到此codesandbox

任何帮助将不胜感激，因为我已经没有想法了。

谢谢

编辑：

如果我从scrollIntoView 选项选项。然而，它确实看起来很紧张。

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

请注意，它适用于Firefox
干杯...有兴趣知道如何处理这个以支持大多数主要浏览器。
我只在 Chrome 和 Brave 上遇到同样的问题，当我打开 behavior: smooth 时，我的 scrollIntoView 功能根本不起作用。当我删除平滑时，它可以工作，但当然不是良好的用户体验。你有没有解决过这个问题？

【解决方案1】：

奇怪的是，这个 scrollIntoView() 在同步调用时不起作用，但在我的情况下，将它放入 setImmediate() 工作正常：

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

【讨论】：