小编Gar*_*end的帖子

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

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

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

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

为了简单起见,我已将我的工作添加到此codesandbox中

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

谢谢

编辑:

如果我从scrollIntoViewOptions选项中删除行为参数中的“smooth”选项,滚动行为似乎会按预期工作。然而它看起来确实很神经质。

const scrollToMenu = (ref) => {
  ref.current.scrollIntoView({ inline: "center", });
};
Run Code Online (Sandbox Code Playgroud)

reactjs js-scrollintoview react-ref react-usememo react-scroll

8
推荐指数
1
解决办法
5784
查看次数