reactjswebselectmaterial-uionscroll

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


is it possible to get scroll position in material-ui list on Scroll, if so, how?

I am trying to add infinite scroll on the select list since I have 5300 elements and it takes forever to render all those elements.


Solution

  • Yes you can. You need to add a scroll handler and test the scrollTop of the list vs the scrollHeight. Please add some code to your questions next time this way it will be easier for people to help you.

    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>
      )
    }
    

    Edit: to target the list of a <Select> you need to target the <Menu> component composing the list of the select using the MenuProps prop.

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

    The way to target inner components in material-ui is described in their api approach documentation.