如何在 React 的滚动事件中获取列表中心的元素？

Question

I have a list of numbers which can scroll vertically. All I want it to get element which placed in center of that list when scroll event fires.

For ex. in this screen I want to get 8

Here is sandbox

Answer 1

Here's a demo using the api - elementFromPoint

export default function App() {
  const refList = useRef();

  function onScroll({ target }) {
    // get the computed dimension of the list
    const { height, width, x, y } = target.getBoundingClientRect();

    // adding x and y as offsets. You may skip this
    const x1 = (width + x) / 2;
    const y1 = (height + y) / 2;

    console.log(document.elementFromPoint(x1, y1)); // prints the element from given point
  }

  return (
    <div className="App">
      <ul
        ref={refList}
        onScroll={onScroll}
      >
        {NUMBERS.map((i) => (
          <li key={i}>{i}</li>
        ))}
      </ul>
    </div>
  );
}