I have a question regarding the scroll behavior of div elements on my webpage. Currently, I have some divs set to overflow: scroll. How can I identify which specific element is currently being scrolled or if the scroll action is applied to the body itself? It seems that event.target only returns the element under the mouse cursor at the time of scrolling, not the actual target element.
https://i.sstatic.net/kuRTz.jpg
One possible solution I came up with involves using the window.onscroll event listener to log the target element. Here's an example of the code:
window.onscroll = function(e){
console.log(e.target);
}body{
background: white;
}
div{
height: 50px;
overflow: scroll;
margin: 25px;
background: black;
color: white;
}The above CSS code sets the background and styling for both the body and individual div elements on the page. The HTML snippet provided demonstrates how the div elements are structured for scrolling content.
Any insights or suggestions on efficiently detecting the scrolled element would be greatly appreciated. Thank you in advance!