Question

是否可以在Scroll的material-ui列表中获得滚动位置，如果可以，如何？

我试图在选择列表上添加无限滚动，因为我有5300个元素，并且渲染所有这些元素需要花费很多时间。

Answer 1

注意，响应正确的是使用 MenuProps 和Mayus：

<Select
  MenuProps={{
    onScroll:loadMoreItems
  }}
>
  {...menuItems}
</Select>

Answer 2

可以。您需要添加滚动处理程序并测试列表的scrollTop与scrollHeight。下次通过这种方式将一些代码添加到您的问题中，这样人们会更轻松地为您提供帮助。

function LongList(props) {
  function loadMoreItems(event) {
    if (event.target.scrollTop === event.target.scrollHeight) {
     //user is at the end of the list so load more items
    } 
  }


  return (
    <List
      onScroll={loadMoreItems}
      style={{
        maxHeight:300,
        overflowY:'scroll'
      }}
    >
      <ListItem></ListItem>
      <ListItem></ListItem>
      <ListItem></ListItem>
      <ListItem></ListItem>
   </List>
  )
}

编辑：要定位<Select>的列表，您需要使用<Menu>属性定位组成选择列表的menuProps组件。

<Select
  menuProps={{
    onScroll:loadMoreItems
  }}
>
  {...menuItems}
</Select>

在api approach documentation中描述了在material-ui中定位内部组件的方式。

是否有可能在Scroll的material-ui选择列表中获得滚动位置？

2 个答案: