这有可能在 material-ui select 列表中获得滚动位置吗？

Question

是否可以在 Scroll 上的 material-ui 列表中获取滚动位置，如果可以，怎么做？

我正在尝试在 select 列表中添加无限滚动，因为我有 5300 个元素，并且需要很长时间才能呈现所有这些元素。

Answer 1

是的，你可以。您需要添加滚动处理程序并测试列表的 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> 的列表为目标，您需要使用 MenuProps 属性以组成 select 的列表的 <Menu> 组件为目标。

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

在 material-ui 中定位内部组件的方法在他们的 api approach documentation 中有描述。

Answer 2

注意正确的响应是使用 MenuProps，与 Mayus:

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

Answer 3

注意高度值加上event.target.scrollTop等于event.target.scrollHeight.

 const HeightPanel=300;
    
       function LongList(props) {
      function loadMoreItems(event) {
        if (event.target.scrollTop+HeightPanel === event.target.scrollHeight) {
         //user is at the end of the list so load more items
        } 
      }
    
    
      return (
        <List
          onScroll={loadMoreItems}
          style={{
            maxHeight:HeightPanel,
            overflowY:'scroll'
          }}
        >
          <ListItem></ListItem>
          <ListItem></ListItem>
          <ListItem></ListItem>
          <ListItem></ListItem>
       </List>
      )
    }

安瓦多的回答

Answer 4

对于 select 列表，您可以这样做：

  const loadMoreItems = (e) => {
     const bottom = e.target.scrollHeight === e.target.scrollTop + e.target.clientHeight;
       if(bottom){
         // add your code here
       }
   };
   
            <Select
              labelId="selectList"
              id="list"
              value={value}
              onChange={handleChange}
              MenuProps={{
                 PaperProps: {
                   onScroll: loadMoreItems,
                 },
                 style: {
                   maxHeight: 500,
                 },
              }}
              input={<Input />}
            >
               <MenuItem></MenuItem>
               <MenuItem></MenuItem>
          </Select>

这有可能在 material-ui select 列表中获得滚动位置吗？

is this possible to get scroll position in material-ui select list on Scroll?

reactjs

web

select

material-ui

onscroll