How to detect the end of the list element on scroll event?

Question

How to detect the end of the list element on scroll event? Lets say i have array [1,2,3,4,5,6,7,8,9,10], i need to detect if the scroll was reached the end of the list and return then value(in this case the value is 10)? Here is my snippet code: https://codesandbox.io/s/react-window-detect-last-element-on-scrolling-down-oo99p

Answer 1

You can use onScroll event for parent div:

const onScroll = (event) => {
  var element = event.target;
  if (element.scrollHeight - element.scrollTop === element.clientHeight)
  {
      console.log(dataArray[dataArray.length - 1]);
  }
} 

See in playground: https://codesandbox.io/s/react-window-detect-last-element-on-scrolling-down-c4sv0?file=/src/index.js