0
387
VistasHow to get an element in center of list at scroll event in React?
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
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
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>
);
}
·
Juan Pablo Isaza
Denunciar
Responde la pregunta