Javascript 滚动至物料界面中的选定列表项

我有一个列表，用材质ui构建。里面有很多项目，所以滚动条是可见的

我想做的是滚动到所选项目。你对如何实现这一点有什么想法吗

单击后，项目列表应如下所示（所选项目位于中心）：

按住列表的参考，然后单击ListItem，根据以下内容计算需要滚动的数量：

列表项高度

所选项目的索引

可见列表项的数目

const scrollableListRef = React.createRef();

function Row(props) {
  const { index, style } = props;

  const placeSelectedItemInTheMiddle = (index) => {
   const LIST_ITEM_HEIGHT = 46;
   const NUM_OF_VISIBLE_LIST_ITEMS = 9;

   const amountToScroll = LIST_ITEM_HEIGHT * (index - (NUM_OF_VISIBLE_LIST_ITEMS / 2) + 1) ;
   scrollableListRef.current.scrollTo(amountToScroll, 0);
  }

  return (
    <ListItem button style={style} key={index} 
    onClick={() => {placeSelectedItemInTheMiddle(index)}}>
      <ListItemText primary={`Item ${index + 1}`} />
    </ListItem>
  );
}

常量scrollableListRef=React.createRef（）； 功能行（道具）{ 常量{index，style}=props； const placeSelectedItemInTheMiddle=（索引）=>{ 施工清单项目高度=46； 可见列表项的常量数量=9； const amountToScroll=列表项高度*（索引-（可见列表项数量/2）+1）； scrollableListRef.current.scrollTo（amountToScroll，0）； } 返回( {placeSelectedItemInTheMiddle（index）}}> ); }

---

我知道这里有一个公认的答案，但我认为

<ListItem autoFocus={true}/>

---

将该列表项滚动到视图中。设置要标记为选中的列表项的相同逻辑也可用于设置

autoFocus

属性。

如果您在我的演示中尝试此代码，您将看到出现连续滚动