滚动到material-ui中的选定列表项答案

【问题标题】：Scroll to selected list item in material-ui滚动到material-ui中的选定列表项
【发布时间】：2020-02-11 05:41:08
【问题描述】：

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

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

Here is a demo sendbox link

点击后的物品列表应该是这样的（选中的物品在中间）：

【问题讨论】：

标签： javascript reactjs material-ui

【解决方案1】：

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

<ListItem autoFocus={true}/>

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

【讨论】：

如果你在我的演示中尝试这段代码，你会看到连续滚动发生

【解决方案2】：

按住 List 的引用，然后单击 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>
  );
}

【讨论】：