I have some divs on my page set to overflow: scroll, like so:

How can I detect which element is currently being scrolled or if the scroll is applied to the body? Event.target only returns the element over which the mouse is currently hovering as the scroll is applied, not the actual target.

window.onscroll = function(e){

	console.log(e.target);

}

body{
  background: white;
}

div{
  height: 50px;
  overflow: scroll;
  margin: 25px;
  background: black;
  color: white;
}

<div>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
</div>

<div>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
</div>

Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>

I have some divs on my page set to overflow: scroll, like so:

How can I detect which element is currently being scrolled or if the scroll is applied to the body? Event.target only returns the element over which the mouse is currently hovering as the scroll is applied, not the actual target.

window.onscroll = function(e){

	console.log(e.target);

}

body{
  background: white;
}

div{
  height: 50px;
  overflow: scroll;
  margin: 25px;
  background: black;
  color: white;
}

<div>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
</div>

<div>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
</div>

Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>

Thanks in advance!

• javascript
• html
• css
• scroll

• reason you do not bind scroll events to the element? did you try e.currentTarget – epascarello Commented Nov 1, 2019 at 21:32
• @epascarello I think e.currentTarget would always be window, since it's the element that the listener was attached to. – Barmar Commented Nov 1, 2019 at 21:34
• Please post all the relevant code (HTML, CSS, JavaScript) in a code snippet here in your question so that we can reproduce your issue and provide a working answer. – Scott Marcus Commented Nov 1, 2019 at 21:41
• Why not bind the event onscroll to your divs, and not to the window ? – iguypouf Commented Nov 1, 2019 at 21:43
• @ScottMarcus I made a JSFiddle, please take a look at my edit. – Ood Commented Nov 1, 2019 at 21:51

3 Answers 3

Edit: I added a function isScrollable so that if your scroller divs are not scrollable (eg. big screens or not enough content), they are not considered as a scrollable element.

You can try going through the ancestors of the target until you find one that is scrollable:

window.addEventListener('scroll', function(e) {
  var el = e.target;
  while (el && el !== document && !isScrollable(el)) {
  	el = el.parent;
  }
  log('Scrolled element: '+ (el.className || 'document'));
}, true);

function isScrollable(el) {
  return el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight;
}

function log(x) {
  document.querySelector('h2').innerHTML = x;
}

/* Some CSS for the demo... */.scroller{width:6em;height:6em;float:left;overflow:scroll;border:4px solid #ddd;margin:.5em;position: relative}.inside{content:"";display:block;width:100em;height:100em;background:url(https://cms-assets.tutsplus./uploads/users/1604/posts/28343/image/WatermelonOrangePatternFinal.png)}.scroller.d .inside{width:100%;height:100%;opacity:.5}.scroller.d::before{position: absolute;z-index:5;content:"Not scrollable (not enough content)";font-size:.8em;}body{color:#fff;font-family:Arial,Helvetica,sans-serif}body::after{content:"";display:block;width:100em;height:100em;background:url(https://365psd./images/previews/b0c/icon-pattern-backgrounds-53906.jpg)}h2{position:fixed;bottom:.2em;left:0;width:100%;text-align:center}

<div class="scroller a"><div class="inside"></div></div>
<div class="scroller b"><div class="inside"></div></div>
<div class="scroller c"><div class="inside"></div></div>
<div class="scroller d"><div class="inside"></div></div>
<h2>Try scrolling</h2>

Change your event binding to bind the div elements directly. If the div doesn't have any overflow, it won't be scrollable and therefore won't fire the event.

// Find all the scrollable divs and loop through the collection of them
document.querySelectorAll("div").forEach(function(div){

  // Bind each to a scroll event listener
  div.addEventListener("scroll", function(){
	  console.log(this.id);
  });

});

body{
  background: white;
}

div{
  height: 50px;
  overflow: scroll;
  margin: 25px;
  background: black;
  color: white;
}

<div id="something">
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
</div>

<div>Not enough here for scroll event</div>

<div id="something else">
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
</div>

Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>
Scroll<br>

Chrome 130 introduced a new scroll badge in the elements panel of the devtools to locate scrollable elements
https://developer.chrome./blog/swe-devtools-scroll-badge